Smooth Scroll To Anchor Plugin With jQuery - smoothScroll.js

An easy and lightweight jQuery smooth scroll plugin which makes the internal anchors smoothly scroll the web page to a particular DIV (or any other point) within the document.

More features:

• Configurable animation duration.
• Optional easing functions.
• Hashtag is supported as well.
• Auto sets focus on the destination element.

Basic usage:

1. Create a normal anchor link pointing to a specific point of the web page.

<a href="#target">Goto</a>
  ...
<div id="target">Target</div>

2. Place both jQuery JavaScript library and the jQuery smoothScroll.js plugin at the end of the document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.smoothscroll.js"></script>

3. Enable the plugin on the anchor link and done.

$(function() {
  $('a[href*="#"]').smoothscroll();
});

4. Set the duration of the scrolling animation.

$('a[href*="#"]').smoothscroll({
  duration:  400
});

5. Apply an additional easing effect to the smooth scrolling. Requires jQuery UI or jQuery easing plugin.

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

$('a[href*="#"]').smoothscroll({
  easing: 'swing'
});

6. Add the target hash to the end of the URL.

$('a[href*="#"]').smoothscroll({
  hash: true
});

7. Set the offset in pixels.

$('a[href*="#"]').smoothscroll({
  offset: 0
});

Changelog:

2019-04-24

• v1.0.6

---

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