Configurable Smooth Scroll Plugin For jQuery - smooth-scroll-jump.js

File Size: 16.7 KB
Views Total: 1167
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Configurable Smooth Scroll Plugin For jQuery - smooth-scroll-jump.js

smooth-scroll-jump.js is a lightweight yet configurable jQuery plugin which enables you to scroll smoothly between anchor links within the document. With support for offset, animation speed and hash change options.

How to use it:

1. Include the jQuery smooth-scroll-jump.js plugin after jQuery library and you're ready to go.

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="smooth-scroll-jump.js"></script>

2. Add the smooth-scroll-jump attribute to the anchor link.

<a href="#section1" smooth-scroll-jump>Scroll To</a>

3. Specify the target position you want to scroll to using id or name attribute.

<h2 id="section1">Section One</h2>

4. If you're using name attribute, you must set the jump-target-attr to true as this:

<a href="#section2" jump-target-attr="name" smooth-scroll-jump>Scroll To</a>

5. Set the animation speed in milliseconds.

<a href="#section3" jump-distance="200" smooth-scroll-jump>With Offset</a>

6. Set the top offset when you scroll to the target position.

<a href="#section4" jump-distance="200" smooth-scroll-jump>With Offset</a>

7. Auto update the URL hash tag based on the ID name.

<a href="#section5" jump-change-hash="true" smooth-scroll-jump>With Hash Update</a>

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