Skip to content
This repository has been archived by the owner on Mar 19, 2023. It is now read-only.

wearejust/navigate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Navigate

Animated navigation on one-pagers using anchors.

When scrolling through a page, the package will update the location address, depending on which section is in view (halfway up the screen). When an anchor is clicked, it smoothly scrolls into position.

Installation

npm install @wearejust/navigate --save

Usage

var Navigate = require('@wearejust/navigate');

$(function() {
    Navigate.init();
});

With options

var Navigate = require('@wearejust/navigate');

$(function() {
    Navigate.init({
        active: 'active',           // Class that is set on active item
        history: true,              // Enable changing of location address
        item: '.navigate-item',     // Item selector
        prefix: 'navigate-',        // Prefix anchor target to enable animation
        replace: false,             // Replace location history, instead of adding
        resetAtTop: true,           // Clears location address at the top of the page
        offset: true,               // Add or subtract offset for the scroll destination
        speed: 500                  // Set animation speed in milliseconds
    });
});

HTML

Navigation
<a class="navigate-item" href="#section-1">Section 1</a>
<a class="navigate-item" href="#section-2">Section 2</a>
<a class="navigate-item" href="#section-3">Section 3</a>

Content
<div id="section-1">...</div>
<div id="section-2">...</div>
<div id="section-3">...</div>