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

Table of contents:

jQuery Smooth Scroll Plugins:

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]


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]


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]


Apply Smooth Scroll To Anchor Links - jQuery Creep.js

A really small (less than 1kb) jQuery smooth scroll plugin which makes anchor links smoothly scroll the page to specific elements instead of a straight jump.

Apply Smooth Scroll To Anchor Links - jQuery Creep.js

[Demo] [Download]


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]


Vanilla JS Smooth Scroll Plugins:

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]


locomotive-scroll

A modern JS library that applies a smooth, subtle, configurable parallax scroll effect to elements when scrolled into view.

locomotive-scroll

[Demo] [Download]


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]


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]


Configurable Smooth Scroll Animation In Vanilla JavaScript – moveTo.js

A lightweight JavaScript library that allows for scroll smoothly between content sections within the document. Powered by window.requestAnimationFrame() API and fully configurable via both JavaScript and Data attributes.

Configurable Smooth Scroll Animation In Vanilla JavaScript – moveTo.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: