Apply Smooth Scroll To Anchor Links - jQuery Creep.js

Creep.js is a really small (less than 1kb) jQuery smooth scroll plugin which makes anchor links smoothly scroll the page to specific elements instead of a straight jump.

For users who are using the modern browsers (Chrome, Firefox, Opera), I highly recommended you to use the CSS scroll-behavior: smooth property to enable the smooth scroll behavior on the page.

html {
  scroll-behavior: smooth;
}

See also:

• 10 Best Smooth Scroll jQuery Plugins
• 10 Best Smooth Scroll JavaScript Plugins

How to use it:

1. To use this plugin, just download and include the Creep.js script after jQuery:

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

2. And then call the function creep on the anchor links within the document. Done.

<nav>
  <a class="nav-link" href="#about">About</a>
  <a class="nav-link" href="#contact">Contact</a>
  ...
</nav>

<section id="about">
  About
</section>

<section id="contact">
  Contact
</section>

...

$(function(){
  $("a").creep();
});

3. Customize the scrolling speed in milliseconds. Default: 1000ms.

$(function(){
  $("a").creep({
    speed: 2000
  });
});

4. Specify how far from the top of the webpage after scrolling. Default: 0.

$(function(){
  $("a").creep({
    offset: 30
  });
});

---

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