Scrollspy Smooth Scroll Plugin in JavaScript – Gumshoe.js

Are you planning to build a single page website? And looking for a solution to add Scrollspy to links? The Gumshoe.js provide smooth scrolling for navigation links.

It enables the links to smoothly scroll between page section with the support of Scrollspy.

It’s a simple vanilla Js script which lightweight (3kb minified) JavaScript library that highlights menu links to indicate the currently active section in the viewport.

The plugin allows implementing on header navigation, sidebar or footer links. You can also use it for the page content to link different section within the content area.

It is a very useful plugin for site navigation to highlight the active item on the menu.

Let’s download the plugin and start implementing on your website. it included three different demos make it fixed at the top of a page, fixed sidebar area and also work with nest sidebar items.

How to Create Scrollspy Smooth Scroll

First, we need to add the required files. You can also use the jsDelivr CDN. Make sure to mention the specific version number to prevent major updates from breaking your site.

If you don’t want to add the CDN version you can load manually.

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

1. Add HTML Markup.

The markup is simple and easy. The Gumshoe.js plugin only needs the list of anchor links to make work the smooth scroll.

You can define the links by using UL (Unordered List) and List item (Li). It’s your choice how you want to style them but it also works with a nested list item.

<ul id="my-awesome-nav">
	<li><a href="#eenie">Eenie</a></li>
	<li><a href="#meenie">Meenie</a></li>
	<li><a href="#miney">Miney</a></li>
	<li><a href="#mo">Mo</a></li>
</ul>

2. Initialize Gumshoe.

In the header or footer of your webpage, initialize Gumshoe by passing in a selector for the menu links that should be detected as the user scrolls.

<script>
	var spy = new Gumshoe('#my-awesome-nav a', {
		nested: true
	});
</script>

3. Add styling.

The plugin already has active class functionality and it will automatically add the .active class to the list item and for content for the active link.

But in the downloadable source file don’t have any styling.

It’s easy to styles to your CSS as per your design need.

#my-awesome-nav a.active {
   font-weight: bold;
   background: #0054ff;
}

And that’s it, you’re done. Nice work!

Make Scrollspy Nested Navigation

The plugin supports the nested navigation menu with multiple levels. Not only this but it also applies an .active class to the parent list items of the currently active link.

<ul id="my-awesome-nav">
	<li><a href="#eenie">Eenie</a></li>
	<li>
		<a href="#meenie">Meenie</a>
		<ul>
			<li><a href="#hickory">Hickory</a></li>
			<li><a href="#dickory">Dickory</a></li>
			<li><a href="#doc">Doc</a></li>
		</ul>
	</li>
	<li><a href="#miney">Miney</a></li>
	<li><a href="#mo">Mo</a></li>
</ul>

To make work the nested items. You need to Set nested to true when Initialize Gumshoe Javascript function.

var spy = new Gumshoe('#my-awesome-nav a', {
	nested: true,
	nestedClass: 'active-parent'
});

Options and Settings

You can pass options into Gumshoe when instantiating.

var spy = new Gumshoe('#my-awesome-nav a', {

	// Active classes
	navClass: 'active', // applied to the nav list item
	contentClass: 'active', // applied to the content

	// Nested navigation
	nested: false, // if true, add classes to parents of active link
	nestedClass: 'active', // applied to the parent items

	// Offset & reflow
	offset: 0, // how far from the top of the page to activate a content area
	reflow: false, // if true, listen for reflows

	// Event support
	events: true // if true, emit custom events

});