Smoothly Scroll An Element Into View - jQuery smoothScrolling
| File Size: | 2.91 KB |
|---|---|
| Views Total: | 1184 |
| 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-behaviorCSS 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.











