Collection
Post cover
Created 4 month back

Best 9 jQuery Scrolling Menus

Collection of free jQuery scrolling menu examples from codepen, GitHub and other resources.

Smooth Anchor Scrolling

Author: Matt Litherland

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Dependencies: jquery.js

One Page Scrolly Thing

Author: Joshua Ward

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

jQuery Onepage Scrolling Nav

Author: Tobias Bogliolo

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Sticky Navigation Menu With Smooth Scrolling

Author: Praveen Bisht

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

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

Vertical Layout with Navigation

Author: Ettrics

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Links: demo and code

Made with: HTML / CSS (Stylus) / JS

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

Navigation with Scrolling

Author: Tobias Glaus

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

One Page Scroll Navigation

Author: Nikolay Talanov

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

One page scroll navigation with CSS transforms.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Scroll Nav

Author: Justin Danks

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback