Add Smooth Scrolling When Clicking Anchor Links

File Size: 9.71 KB
Views Total: 1161
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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

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

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

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


3. Initialize the plugin and we're done.

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

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

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