Smooth Scroll To ID/Anchor/DIV Using jQuery - smoothScroll.js
File Size: | 2.38 KB |
---|---|
Views Total: | 3726 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.