Configurable Smooth Scroll Plugin For jQuery - smooth-scroll-jump.js
File Size: | 16.7 KB |
---|---|
Views Total: | 1174 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.