10 Best Smooth Scroll JavaScript/jQuery Plugins (2022 Update)

by jQueryScript,

What Is Smooth Scroll?

The Smooth Scroll feature enables the user to smoothly scroll the webpage to a specific point or element within the webapge when clicking or tapping anchor links.

When implemented well, it provides an enjoyable user experience and can make your site feel more polished.

The Best Smooth Scroll Plugin

In this article, we'll take a look at the 10 best Vanilla JavaScript (and jQuery) Smooth Scroll plugins to bring the smooth scrolling experience on your long web page. We'll also discuss how to implement them and some of the benefits they offer. So, if you're looking for an easy way to add smooth scrolling to your pages, keep reading!

Smooth Scroll With Pure CSS?

You can also use the scroll-behavior CSS property to implement the smooth scrolling on a scrolling box.

html {
  scroll-behavior: smooth;
}

Originally Published Dec 17 2017, updated Jan 15 2022

Table of contents:

jQuery Smooth Scroll Plugins:

Sticky Header Navigation With Smooth Scroll

A sticky, responsive, mobile-friendly header navigation concept that automatically shrinks itself on scroll down and features smooth scroll functionality which makes it possible to scroll through page sections by clicking on nav links. Built with jQuery, HTML, and CSS/CSS3.

Sticky Header Navigation With Smooth Scroll

[Demo] [Download]


Sticky Header Navigation With Smooth Scroll

panelSnap is a jQuery plugin that allows to snap to blocks of content when you scroll through a web page or parts of it.

JavaScript Plugin For Smooth Scroll Snapping - panelSnap

[Demo] [Download]


Smooth Scroll Plugin For Bootstrap Scrollspy Component - smoothScroll.js

A tiny jQuery plugin that adds the Smooth Scroll functionality to the native Bootstrap 4 scrollspy component. Based on jQuery's animate() method.

Smooth Scroll Plugin For Bootstrap Scrollspy Component - smoothScroll.js

[Demo] [Download]


Smooth Scroll To Anchor Plugin With jQuery - smoothScroll.js

An easy and lightweight jQuery smooth scroll plugin which makes the internal anchors smoothly scroll the web page to a particular DIV (or any other point) within the document.

Smooth Scroll To Anchor Plugin With jQuery - smoothScroll.js

[Demo] [Download]


Custom Smooth Scroll For Anchor Links - jQuery AnchorScroll

An alternative to the CSS scroll-behavior: smooth property that applies a smooth scroll effect with configurable speed, easing, and offset to anchor links within the document.

Custom Smooth Scroll For Anchor Links - jQuery AnchorScroll

[Demo] [Download]


Vanilla JS Smooth Scroll Plugins:

Scrollspy & Smooth Scroll Library – scrollspy.js

A lightweight pure JavaScript scrollspy library that enables the navigation links to smoothly scroll between page sections with scrollspy support.

Scrollspy & Smooth Scroll Library – scrollspy.js

Demo Download


scroll-animate-to

The scroll-animate-to JavaScript library animates scrolling to a specified point within the document.

scroll-animate-to

Demo Download


Scroll To Anchor

Scroll To Anchor

Yet another smooth scroll JavaScript library that smoothly scrolls the page to specific anchors with offsets in the document.

Demo Download


Animate Scrolling To Anchor Links – scrollToSmooth

Animate Scrolling To Anchor Links – scrollToSmooth

[Demo] [Download]

Just another pure JS smooth scroll library to animate the page scrolling to specified anchor links, with or without easing functions.


Tiny Smooth Scroll Library – smoothScroll.js

An ES5/ES6 JavaScript library used to implement the configurable smooth scroll behavior on your long web page.

Tiny Smooth Scroll Library – smoothScroll.js

Demo Download


More Resources:

Want more jQuery plugins or JavaScript libraries to create awesome Smooth Scrolling Effect on the web & mobile? Check out the jQuery Smooth Scroll and JavaScript Smooth Scroll sections.

See also: