20+ jQuery Scrolling Menus - Free Code + Demos
Collection of 20+ jQuery Scrolling Menus. All items are 100% free and open-source.
1. Sticky Navigation Menu With Smooth Scrolling
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.
Author: Praveen Bisht (prvnbist)
Links: Source Code / Demo
Created on: February 15, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: animation, scroll, sticky, menu
2. JQuery | Onepage Scrolling Nav
Author: Tobias Bogliolo (tobiasdev)
Links: Source Code / Demo
Created on: June 4, 2017
Made with: HTML, CSS, JS
Tags: navigation, jquery, javascript, menu, snippet
3. Vertical Layout With Navigation
Vertical scrolling sections of content with mobile hamburger navigation. Animations easily customized.
Author: Ettrics (ettrics)
Links: Source Code / Demo
Created on: April 7, 2015
Made with: HTML, SCSS, JS
Tags: vertical, layout, navigation, animation, responsive
4. Smooth Scrolling + Highlight Links
[Work In Progress] 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 ) There is room for optimization! :)
Author: Raphael Pora (rpora)
Links: Source Code / Demo
Created on: November 28, 2014
Made with: HTML, Stylus, JS
Tags: scroll, smoothscroll, vh
5. One Page Scroll Navigation With Css Transforms
Just playing around
Author: Nikolay Talanov (suez)
Links: Source Code / Demo
Created on: September 13, 2014
Made with: HTML, SCSS, JS
6. Smooth Anchor Scrolling
Super lightweight smooth anchor scrolling. You are able to switch navigation 'active' class and scroll smoothly to id's throughout the page. I have also tweaked the code to allow for linking to id's from outside the main navigation. I have also included a basic scrollTop function.
Author: Matt (mattsince87)
Links: Source Code / Demo
Created on: June 24, 2013
Made with: HTML, SCSS, JS
Tags: scroll, smooth, jquery, anchor, ui
7. Fixed Menu Scroll Page & Active In Menu
Author: yuki (yuki-san)
Links: Source Code / Demo
Created on: February 24, 2016
Made with: HTML, CSS, JS
8. Smooth Scrolling With JQuery
Author: Norbertas (Norby777)
Links: Source Code / Demo
Created on: August 29, 2018
Made with: HTML, SCSS, JS
9. Jump Menu With Active Class And Smooth Scroll
Smoooooooooth
Author: Elena Scherer (eksch)
Links: Source Code / Demo
Created on: October 5, 2015
Made with: HTML, SCSS, JS
Tags: navigation, smooth-scroll
10. Jquery Smooth-scroll
Code from: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h Just added smooth-scroll^^
Author: Jrsqn (last-first)
Links: Source Code / Demo
Created on: April 25, 2016
Made with: HTML, JS
11. FreeCodeCamp Portfolio Project
A one page personal portfolio made for FreeCodeCamp, Zipline #1
Author: Erin Manahan (sonorangirl)
Links: Source Code / Demo
Created on: August 28, 2015
Made with: HTML, CSS, JS
Tags: portfolio, one-page, smooth-scrolling, free code camp
12. Simple JQuery Scrollspy
Author: Amelia Carlie (acarlie)
Links: Source Code / Demo
Created on: July 2, 2019
Made with: HTML, CSS, JS
Tags: jquery, scrollspy
13. SImple One Page Scrolling
Author: sonam (sonamtsu)
Links: Source Code / Demo
Created on: November 14, 2018
Made with: HTML, SCSS, JS
14. JQuery Scroll Top
Author: Karen Grigoryan (karencho)
Links: Source Code / Demo
Created on: June 1, 2014
Made with: HTML, CSS, JS
Tags: jquery, scroll, top
15. Vertical Navigation Scroll Effect
A simple CSS3 animation scroll effect made for a vertical navigation. Set up of the vertical navigation was based on this pen (http://codepen.io/creotip/pen/BoOwBr/)
Author: Janet Mendez (janmez)
Links: Source Code / Demo
Created on: May 14, 2016
Made with: HTML, CSS, JS
Tags: vertical-navigation, scroll-effect, css3, css3-animation, navigation
16. Smooth Scroll + Nav Active Classes + Nav Fade-on-scroll
A whole bunch of options for a single page navigation.
Author: Elena Scherer (eksch)
Links: Source Code / Demo
Created on: May 8, 2015
Made with: HTML, SCSS, JS
Tags: navigation, smooth-scroll
More Awesome Lists:
Share: