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.
DemoThere'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/
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' |
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.
| 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.
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
