ScrollSpy Vanilla Javascript Library or Frameworks

Scrollspy vanilla JavaScript without a library or external frameworks Scrolling script Indicates which sections of content are viewing by updating navigation link styles in page scrolling.

JQuery to Beautifully Scroll Between Sections | pageScroll.js

How to make use of it:

1. Create anchor links pointing to content sections throughout the doc.

<nav class="scrollspy-nav">
  <a class="scrollspy-link" data-target="home">Home</a>
  <a class="scrollspy-link" data-target="about">About</a>
  <a class="scrollspy-link" data-target="services">Services</a>
  <a class="scrollspy-link" data-target="blog">blog</a>
  <a class="scrollspy-link" data-target="contact">Contact</a>
  <span class="scrollspy-indicator"></span>
<section class="scrollspy-section" id="home">Home</section>
<section class="scrollspy-section" id="about">About</section>
<section class="scrollspy-section" id="services">Services</section>
<section class="scrollspy-section" id="blog">Blog</section>
<section class="scrollspy-section" id="contact">Contact</section>

2. Place the JavaScript file scrollspy.min.js on the bottom of the doc.

<script src="scrollspy.min.js"></script>

3. Highlight the energetic nav link utilizing your individual.

.scrollspy-nav .scrollspy-indicator {
  position: absolute;
  height: 3px;
  width: 0;
  background: red;
  bottom: 0;
  left: 0;
  transition: width 0.3s, left 0.1s;

Minimalist Scrollspy Implementation, scrollspy Plugin/Github

See Demo And Download

Official Website(aashishpanthi): Click Here

This superior jQuery/javascript plugin is developed by aashishpanthi. For extra advanced usage, please go to the official website.

Related Posts


A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on the selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with…


A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…


Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…


Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components. Using Bootstrap…


jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Chartinator is a jQuery plugin for converting HTML tables, Google Sheets and js arrays into charts using Google Charts. Use data from HTML tables Chartinator is designed…


Customizable & Composable Charts for VueJS | vue-wcharts

WCharts is a library that makes it easy to create your own charts using Vuejs. You can easily create reusable chart components. Use a basic layout or…