jQuery Plugin For Configurable Smooth Scroll Experience - smoothScroll

File Size: 76.1 KB
Views Total: 3076
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Configurable Smooth Scroll Experience - smoothScroll

Just another jQuery plugin which provides a smooth scroll experience (with configurable offset, duration and easing effect) to your one page scrolling website.


# Yarn
$ yarn add jquery.smoothscroll

$ npm install jquery.smoothscroll --save

How to use it:

1. Link the jQuery smoothScroll.js plugin to your web project, after you've installed jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="https://unpkg.com/jquery.smoothscroll@2latest/dist/jquery.smoothscroll.min.js"></script>

2. Include the jQuery easing plugin for more easing functions.

<script src="jquery.easing.min.js"></script>

3. Create anchor links you want to navigate between within the document.

<section id="top"><a href="#2">Goto Section 2</a></section>
<section id="2"><a href="#3">Goto Section 3</a></section>
<section id="3"><a href="#4">Goto Section 4</a></section>
<section id="4"><a href="#top">Back To Top</a></section>

4. Initialize the plugin and done.

  target  : 'a[href^="#"]'

5. Change the default animation speed.

  duration: 1000

6. Change the default easing effect.

  easing  : 'easeOutQuint'

7. Specify the space between destination element and top of the viewport.

  offset  : 0

8. Append the hashtags to the URL.

  hash    : true



  • v3.0.1


  • v3.0.0


  • Code refactoring.

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