Tiny Customizable jQuery Smooth Scroll Plugin - smoothScroll.js

File Size: 4.39 KB
Views Total: 1123
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Tiny Customizable jQuery Smooth Scroll Plugin - smoothScroll.js

Just another jQuery smooth scroll plugin which enables anchor links to scroll smoothly between page sections within the document.

How to use it:

1. Create an anchor link pointing to the target point where you'd like to scroll the page to.

<div id="top"></div>
<a href="#top">Back to top</a>

2. Place both jQuery library and the jQuery.smoothScroll.js script at the bottom of the html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jQuery.smoothScroll.js"></script>

3. Enable the plugin on the anchor link and done.

$('a').smoothScroll();

4. Config the smooth scroll with the following options.

$('a').smoothScroll({
  $scroller: $('html, body'),
  duration: 5000, // in ms
  easing: 'swing',
  cancelable: true,
  cancelEvent: 'click.smoothScroll scroll.smoothScroll mousedown.smoothScroll wheel.smoothScroll DOMMouseScroll.smoothScroll mousewheel.smoothScroll keyup.smoothScroll touchstart.smoothScroll',
});

5. Callback functions.

$('a').smoothScroll({
  onCancel: function() {},
  afterScroll: function() {}
});

This awesome jQuery plugin is developed by NozomuIkuta. For more Advanced Usages, please check the demo page or visit the official website.