jQuery Plugin For Custom Smooth Page Scrolling Effects - Animate Scroll
File Size: | 18.7 KB |
---|---|
Views Total: | 790 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another jQuery smooth scroll plugin that enables the anchor links to scroll smoothly between specified positions in the webpage, with custom animation speed and scroll offset.
How to use it:
1. Load jQuery library and the jQuery animate scroll plugin at the bottom of the webpage.
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script> <script src="dist/jquery.animate-scroll.min.js"></script>
2. Create anchor links pointing to the specified positions within the document.
<li><a href="#article-1">Article One</a></li> <li><a href="#article-2">Article One</a></li> <li><a href="#article-3">Article One</a></li> <article id="article-1"> ... </article> <article id="article-2"> ... </article> <article id="article-3"> ... </article>
3. Initialize the plugin and done.
$('#menu a').animateScroll();
4. Override the default speed and offset options.
$('a').animateScroll({ offset: 0, speed: 400 });
5. You can also specify the speed and offset options for each anchor links using data-*
attributes as follows:
<a href="#article-2" data-speed="1000">Article Two</a> <a href="#article-3" data-speed="2000" data-offset="-250">Article Three</a>
This awesome jQuery plugin is developed by risan. For more Advanced Usages, please check the demo page or visit the official website.