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>