Animate Scrolling To Anchor - No Fuss Smooth Scroll
File Size: | 5.79 KB |
---|---|
Views Total: | 2202 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A super tiny yet customizable smooth scroll plugin that animates vertical page scrolling to any element specified using a unique ID.
It provides several parameters to customize the smooth scroll behavior and can be used as an alternative to the CSS scroll-behavior: smooth property.
See Also:
How to use it:
1. Assign an unique ID to the target element (e.g. top nav).
<nav id="target"> Top Nav Here </nav>
2. Create a trigger element pointing to the nav element.
<button id="trigger" data-smoothytarget="#target"> Back To Top </button>
3. Put the JavaScript file no-fuss-jquery-smoothy-scroll.js
after jQuery library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/no-fuss-jquery-smoothy-scroll.js"></script>
4. Enable the smooth scroll plugin on the trigger element.
makeItRealSmooth($("#trigger"));
5. Customize the duration of the animation.
makeItRealSmooth($("#trigger"), 1000);
6. Determine the offset in pixels.
makeItRealSmooth($("#trigger"), 1000, 50);
7. Trigger a function after the smooth scroll is finished.
makeItRealSmooth($("#trigger"), 1000, 50, { // do something });
This awesome jQuery plugin is developed by sricharankrishnan. For more Advanced Usages, please check the demo page or visit the official website.