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.

Installation:

# Yarn
$ yarn add jquery.smoothscroll

# NPM
$ 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.

$(document).SmoothScroll({
  target  : 'a[href^="#"]'
});

5. Change the default animation speed.

$('a[href^="#"]').SmoothScroll({
  duration: 1000
});

6. Change the default easing effect.

$('a[href^="#"]').SmoothScroll({
  easing  : 'easeOutQuint'
});

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

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

8. Append the hashtags to the URL.

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

Changelog:

2020-05-19

• v3.0.1

2020-03-26

• v3.0.0

2019-03-21

• Code refactoring.

---

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