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
   
Animate Scrolling To Anchor - No Fuss Smooth Scroll

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.