jQuery scrolling menu examples and plugins

Welcome to our collection of jQuery code examples! In this carefully curated compilation, we have gathered a wide array of code snippets that demonstrate the power and versatility of the jQuery library.

Scroll Nav

Author:
Justin Danks | February 21, 2020
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

One Page Scrolly Thing

Author:
Joshua Ward | November 11, 2018
Made with:
HTML (Pug) / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

Navigation with Scrolling

Author:
Tobias Glaus | June 28, 2018
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Sticky Navigation Menu With Smooth Scrolling

Author:
Praveen Bisht | February 15, 2018
Made with:
HTML (Pug) / CSS (SCSS) / JS

About a code

It's basically a template with couple of features like that are invoked on scroll - Shrink Header, addition of drop shadow. Other than that smooth scroll feature is also added to logo(scroll top top) and smooth scroll to section on clicking menu item.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

jQuery Onepage Scrolling Nav

Author:
Tobias Bogliolo | June 4, 2017
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

Vertical Layout with Navigation

Author:
Ettrics | April 7, 2015
Made with:
HTML / CSS (SCSS) / JS

About a code

Vertical scrolling sections of content with mobile hamburger navigation. Animations easily customized.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
font-awesome.css, jquery.js

Smooth Scrolling and Highlight Links

Author:
Raphael Pora | November 28, 2014
Made with:
HTML / CSS (Stylus) / JS

About a code

A little smooth scrolling JS module. Accept GSAP with scrollTo plug or jquery (default : jQuery) You can customize the behavior when scroll occurs ( class attributions, etc ).

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

One Page Scroll Navigation

Author:
Nikolay Talanov | September 13, 2014
Made with:
HTML / CSS (SCSS) / JS

About a code

One page scroll navigation with CSS transforms.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

Smooth Anchor Scrolling

Author:
Matt Litherland | June 24, 2013
Made with:
HTML / CSS (SCSS) / JS

About a code

Super lightweight smooth anchor scrolling. You are able to switch navigation active class and scroll smoothly to id's throughout the page.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js
scrollNav

scrollNav

Author:
Jimmy Wilson | 2013
Made with:
394 stars25 watchers

About a code

A jQuery plugin for building a scrolling navigation menu.

visualNav

visualNav

Author:
Rob Garrison | 2010
Made with:
68 stars8 watchers

About a code

A jQuery plugin that modifies a navigation menu to highlight/change when the menu's target smooth scrolls into view.

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨