10 Best Smooth Scroll JavaScript/jQuery Plugins (2024 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 26 2024

Table of contents:

jQuery Smooth Scroll Plugins:

JavaScript Plugin For Smooth Scroll Snapping - panelSnap

A JavaScript plugin (jQuery is optional) 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]


jQuery Plugin For Smooth Page Scrolling with Fancy Effects - anchorScroll

A jQuery plugin that allows your anchor link to smoothly scroll to an specified section / position within the document, in addition to adding a CSS class to a specific element so that you can create a custom CSS based effect when vertical page scrolling.

jQuery Plugin For Smooth Page Scrolling with Fancy Effects - anchorScroll

[Demo] [Download]


jQuery Smooth Content Scrolling Plugin - Smooth Scroll

A jQuery plugin that allows you to scroll any element of you page with smooth animation effect. With this plugin you can easily create scroll to top, scroll to content, horizontal scrolling, vertical scrolling on the same page.

jQuery Smooth Content Scrolling Plugin - Smooth Scroll

[Demo] [Download]


Add Smooth Scrolling to Any Element with the jQuery ScrollTo Plugin

A lightweight jQuery plugin for creating a configurable elegant smooth scroll effect that guides visitors to a specific element on your webpage.

Add Smooth Scrolling to Any Element with the jQuery ScrollTo Plugin

[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]


Vanilla JS Smooth Scroll Plugins:

Smooth Scroll With Easing Functions – smooth-scroll

A lightweight, fast JavaScript library which applies a smooth scroll behavior (with or without easing functions) to anchor links within the document.

Smooth Scroll With Easing Functions – smooth-scroll

[Demo] [Download]


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

[Demo] [Download]


Super Smooth Scroll To JavaScript Library – Scroller.js

A lightweight and customizable smooth scrolling JavaScript library that works with any element (not only anchor links).

super-smooth-scroll-scroller

[Demo] [Download]


JavaScript Library For Smooth Page Scrolling Effect – smoothScroll

A super tiny (~2kb) JavaScript library which enables your webpage scrolling to a specified position within the document.

JavaScript Library For Smooth Page Scrolling Effect – smoothScroll

[Demo] [Download]


Modern Performant Smooth Scroll Library – Jump.js

A modern, performant and customizable smooth scroll library written in pure JavaScript (ES6).

Modern Performant Smooth Scroll Library – Jump.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: