Smooth Scroll To ID/Anchor/DIV Using jQuery - smoothScroll.js

File Size: 2.38 KB
Views Total: 3710
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Smooth Scroll To ID/Anchor/DIV Using jQuery - smoothScroll.js

Yet another jQuery based smooth scroll script which smoothly scrolls the web page to a specific point/ID/anchor/DIV within the document. Also has the ability to automatically update the url hash when the smooth scroll is completely finished.

How to use it:

1. Create anchor links pointing to the elements with unique IDs:

<a class="sscroll" href="#target-1">Goto Target 1</a>
<a class="sscroll" href="#target-2">Goto Target 2</a>
<a class="sscroll" href="#target-3">Goto Target 3</a>

<div id="target-1">
  Target DIV 1
</div>

<div id="target-2">
  Target DIV 2
</div>

<div id="target-3">
  Target DIV 3
</div>

2. Import the necessary jQuery JavaScript library into the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>

3. The main JavaScript (jQuery script) to enable the smooth scroll effect.

$(document).ready(function(){

$(".sscroll").on('click', function(event) {
      if (this.hash !== "") {
        event.preventDefault();
        var hash = this.hash;
        $('html, body').animate({
          scrollTop: $(hash).offset().top
        }, 1000, function(){
          window.location.hash = hash;
        });
      }
    });
    
});

This awesome jQuery plugin is developed by Shahi9935. For more Advanced Usages, please check the demo page or visit the official website.