jQuery Plugin For Custom Smooth Page Scrolling Effects - Animate Scroll

File Size: 18.7 KB
Views Total: 789
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Custom Smooth Page Scrolling Effects - Animate Scroll

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.