View on GitHub

Smooth-nav
Simply Smooth on Page Navigation

Overview

After getting tired of adding a snippit of code in the JavaScript of my web projects to enable smoothly animated, on-page navigation, I decided to put together a library so this functionality can be enabled through the html5 data-api or through a simple jQuery extension. I hope you can find a use for it!

I treated this project as an exercise in following the coding style and practice I find in the Bootstrap project. I have great respect for @mdo and @fat and the Bootstrap team for the awesome frameworks and advice they provide to the community. Rock on guys!

jQuery Requirement

This package requires JQuery >= 1.7 to function.

Installation

There are two options when installing Smooth-nav: simple and contributor.

Simple download

https://github.com/iteam-software/smooth-nav/releases/download/v0.1.0/smooth-nav.zip

Contributor npm

Install smooth-nav with npm by using npm install smooth-nav

Data-Api Back to top

To add smooth-nav functionality to a link, add data-scroll="smooth" to any anchor tag which references an on page element.


<a href="#a-cool-place" data-scroll="smooth">Go to</a>
...
<div id="a-cool-place">
  <h1>The Cool Place</h1>
</div>

Resolvable Targets Required

Smooth-nav links must target a element which can be resolved. For example a <a href="#the-target">Link</a> must point to an element on the page like <div id="the-target"></div>.

JavaScript Back to top

Call the smooth-nav plugin via JavaScript:


$('#link').smooth({ speed: 250 });

Options Back to top

Options can be set via the data-api or JavaScript. To use the data-api, append the option name to data-scroll-.

Name Type Default Description
speed number 300 The speed in milliseconds at which the scroll animation plays

Example Back to top

You are living the example right now! Use links on this page to experience smooth-nav in action.

Dumping the license to exaggerate the effect.

The MIT License (MIT)

Copyright (c) 2015 iTEAM Software

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.