🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Nav Scroll is a lightweight jQuery plugin that create a responsive one page navigation for animated page scrolling to specific ID within the document.

scrolling One-Page-Scrolling

Documentation

NavScroll

NavScroll is a simple jQuery plugin for animated scrolling to a section of your page. It also features mobile dropdown support so if your navigation transforms into a dropdown on a certain breakpoint, navScroll hides the dropdown after a click.

Demo

There's a demo included with this package. It's an example of navigation I use a lot, so feel free to use it yourself!
You can also checkout the demo here: jhammann.github.io/jquery-navScroll/demo/

Setup

Include a recent version of jQuery and the navScroll plugin inside your page.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="jquery.navScroll.js"></script> <script>   // To attach navScroll to an element without mobile dropdown support   $('.nav').navScroll();    // Or you can enable mobile dropdown support and give it a custom breakpoint (defaults to 1024)   $('.nav').navScroll({     mobileDropdown: true,     mobileBreakpoint: 768   }); </script>

Install

You can install jquery-navScroll with NPM:

npm install jquery-nav-scroll -S

You can also use a CDN:

https://unpkg.com/jquery-nav-scroll/jquery.navScroll.min.js 

Options

Name Description Type Default
scrollTime The time it takes to scroll to the element in milliseconds (set this to 0 so it obviously won't show an animation). Integer 500
navItemClassName The class of the items which invokes the scroll animation. All anchor tags inside the element are clickable when the value is empty. String ''
navHeight Set the height of the navigation (to use as offset). 'auto' let's the plugin determine the height automatically, a number determines the height in px. Integer or String 'auto'
mobileDropdown If your navigation hides and is used as a dropdown on small screens setting this to true hides the dropdown after a click. Boolean false
mobileDropdownClassName Additionaly you can insert the mobile nav's classname here, when left empty the plugin searches for a <ul> in the same parent element. String ''
mobileBreakpoint The 'mobile' breakpoint (like the max-width of a media query). It's recommended that you check this if you use mobile dropdown support. Integer 1024
scrollSpy Set to true if you want to enable the scrollspy, it adds an active class to the nav items when you scroll past their sections. Boolean false
activeParent Set to true if you want the parent of the anchor to have an active class instead of the anchor itself (only if ScrollSpy is enabled). Boolean false
activeClassName Set the name of the active class when using ScrollSpy. String 'active'

Specific scrollTime

The scrollTime option is for all <a> tags inside the element on which navScroll is called. If you want different scrollTimes for different anchors you have to include the data-attribute data-scrolltime. The value should be a number. The 'Section 3' URL in the demo is an example of this.

Callbacks

Name Description Type
onScrollStart Callback function, will be executed when the scrolling animation starts. Function
onScrollEnd Callback function, will be executed when the scrolling animations ends. Function
$('.nav').navScroll({   onScrollStart: function() {     // Execute code when the scrolling starts.   },   onScrollEnd: function() {     // Execute code when the scrolling ends.   } });

Changelog

Version 1.4.1

  • Added package.json

Version 1.4.0

  • Added the onScrollStart and onScrollEnd callback functions.

Version 1.3.1

  • Added the activeClassName option. This makes it possible to change the class name the plugin gives to an active item when using ScrollSpy.

Version 1.3.0

  • Added the activeParent option. When set to true it gives the parent of the anchor an active class when using ScrollSpy instead of the anchor itself.
  • [Bugfix] Navigations with ScrollSpy enabled also support non-anchor URL's.

Version 1.2.1

  • [Bugfix] ScrollSpy also works in IE. Added support for an older doctype.
  • Changed some styling for the demo.

Version 1.2.0

  • Added the option to enable scrollSpy which gives nav items an active class when you scroll past their sections.

Version 1.1.1

  • [Bugfix] Clicking on <a> tags without a leading # in the href attribute now navigates you to the actual path and won't return an error.

Version 1.1.0

  • Added support for the scrollTime data attribute.

You May Also Like