Customizable Smooth Scroll Plugin with jQuery - smoothScroll

Customizable Smooth Scroll Plugin with jQuery - smoothScroll
File Size: 6.69 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Yet another jQuery smooth scroll plugin which allows the visitor to scroll smoothly between anchor links within the document.

How to use it:

1. Create an anchor link pointing to a specific point where you want to scroll the page to.

<div id="top">
  ...
</div>

...

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

2. Include jQuery JavaScript library and the jQuery smoothScroll plugin at the end of the document.

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

3. Include the jQuery easing plugin for more easing effects.

<script src="jquery.easing.min.js"></script>

4. Just call the function on the a tag and we're done.

$('a').smoothScroll();

5. All default options.

$('a').smoothScroll({

  // or 'mouseover'
  events: 'click',

  // animation speed
  speed: 300,

  // easing
  easing: 'linear',

  // offset in pixels
  offset: 0,

  // selector attribute
  selectorAttribute: 'href',

  // only works on anchor links
  hashOnly: true,

  // callback
  callback: function() {}
  
});

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