Smoothly Scroll An Element Into View - jQuery smoothScrolling
File Size: | 2.91 KB |
---|---|
Views Total: | 1159 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

An ultra-light jQuery smooth scroll plugin which enables anchor links to smoothly scroll the current page to specific positions within the document.
See also:
- 10 Best Smooth Scroll jQuery Plugins
- 10 Best Smooth Scroll JavaScript Plugins
- Or use
scroll-behavior
CSS property:scroll-behavior: smooth;
How to use it:
1. Add the jQuery smoothScrolling plugin's script to the page, after you've added jQuery.
<!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" </script> <!-- smoothScrollin-jQuery --> <script src="smoothScrolling.js"></script>
2. Create anchor links pointing to the page sections within the same document. That's it.
<a href="#section1">To Section One</a> <a href="#section2">To Section Two</a> <section id="section1"> Section One </section> <section id="section2"> Section Two </section>
3. Customize the animation speed in milliseconds Default: 1000ms.
$('html, body').animate({ scrollTop: target.offset().top }, 1000);
This awesome jQuery plugin is developed by Manuel-Suarez-Abasca. For more Advanced Usages, please check the demo page or visit the official website.