active-scroll

jQuery Plugin for smooth scrolling with anchor highlighting

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
active-scroll
201.0.27 years ago7 years agoMinified + gzip package size for active-scroll in KB

Readme

ActiveScroll.js Build Status
This jQuery plugin allows for Smooth Scrolling with Anchor Highlighting.
ActiveScroll.js determines which targeted element is closer to the page scroll position and highlights that anchor. It provides a smooth scrolling feature with an onclick event attached to a customised data attribute.
Highlighting will only apply to anchors in the initiated container. However all links with the data attribute will have the scrollTo feature.
$('nav').activescroll({
    scroll: "scroll",
    active: "active",
    offset: 20,
    animate: 1000
});
Installation

NPM

Make sure you have node.js installed. It comes bundled with npm
npm install active-scroll --save

Bower

Make sure you have bower installed.
bower install active-scroll --save
Usage
Make sure you have a data attribute that references the id of the element that the page will be scrolled to.
<nav>
    <ul>
        <li data-scroll="intro">Introduction</li>
        <li data-scroll="basic">Basic</li>
    </ul>
</nav>
...
<h2 id="intro">Introduction</h2>
...
<div id="basic">
    <p>Hello World</p>
</div>
Inititate the plugin on the element that contains all the data bindings.
$('nav').activescroll();
Settings

data (default: scroll)

The data setting looks for the data attribute to define the anchor tags. For compatability with other plugins you can change the bind in the options.
<nav>
    <ul>
        <li data-link="intro">Introduction</li>
        <li data-link="basic">Basic</li>
    </ul>
</nav>
$('nav').activescroll({
    data: "link"
});

active (default: active)

The active setting determines the class name to attach to the anchor if it highlighted.
<nav>
    <ul>
        <li data-scroll="intro">Introduction</li>
        <li data-scroll="basic">Basic</li>
    </ul>
</nav>
$('nav').activescroll({
    active: "highlight"
});
So if Introduction was determined to be the active Anchor:
<nav>
    <ul>
        <li class="highlight" data-scroll="intro">Introduction</li>
        <li data-scroll="basic">Basic</li>
    </ul>
</nav>

offset (default: 20)

The offset setting determines the offset of the scrollTo position.
$('nav').activescroll({
    offset: 10
});

animate (default: 1000)

The animate setting determines the ms the scrollTo should take.
$('nav').activescroll({
    animate: 2000
});