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

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.

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.

  • Publication date: 28.12.2018
  • Source