Add Smooth Scrolling When Clicking Anchor Links

A super tiny smooth scroll jQuery plugin that automatically applies a smooth scrolling effect to anchor links found within the document.

Based on CSS scroll-behavior: 'smooth' property.

How to use it:

1. Load the smooth-scroll-window.js script after loading jQuery JavaScript library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/smooth-scroll-window.js"></script>

2. Create nav links that point to content sections as follows:

<ul>
  <li>
    <a href="#section-1">Sec 1</a>
  </li>
  <li>
    <a href="#section-1">Sec 2</a>
  </li>
  <li>
    <a href="#section-1">Sec 3</a>
  </li>
  ...
</ul>

<section id="section-1">
  <p>Section 1</p>
</section>

<section id="section-2">
  <p>Section 2</p>
</section>

<section id="section-3">
  <p>Section 3</p>
</section>

...

3. Initialize the plugin and we're done.

// jQuery noConflict declaration
jQuery.noConflict();
// run jQuery
jQuery(document).ready(function( $ ){
  // jQuery Smooth Scroll Window
  $(this).smoothScrollWindow();
});

4. You can also use the plugin to create a Back To Top button by creating an empty anchor link as follows.

<a href="#">
  Back To Top
</a>

---

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