Suppose you have a long web page or single page web app, you might need a scrollspy plugin to track the scroll position and indicate which content section your visitors are viewing on.
What Is Scrollspy?
Scrollspy is a technique widely used in modern web design that keeps track of scroll events in a scrollable container or the whole document and triggers certain functions on specified elements based on the scroll position.
The Best Scrollspy Plugin
Originally Published Aug 27 2020, updated Sep 16 2021
Table of contents:
Best jQuery Scrollspy Plugins
A super tiny (less than 1kb) jQuery scrollspy plugin to highlight active menu items in the navigation based on the scroll position of the corresponding content within a container or the whole document.
A tiny jQuery plugin that adds the Smooth Scroll functionality to the native Bootstrap 4 scrollspy component. Based on jQuery's animate() method.
The jQuery Click-scroll plugin lets you create a site navigation that enables the user to scroll through different page sections with smooth scroll and scrollspy functionalities.
A multi-purpose jQuery site navigation plugin to create a sticky navigation with smooth scroll and scroll spy functionalities for your single page web application.
An easy yet fully customizable jQuery scrollspy navigation plugin that highlights active links of your site navigation as the user scrolls to the corresponding section.
Best vanilla JS Scrollspy Plugins
This is a sticky on-page navigation (a.k.a table of contents) that automatically highlights the active menu items based on the visibility of their corresponding content sections within the document.