active-scroll

    1.0.2 • Public • Published

    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
    });

    Install

    npm i active-scroll

    DownloadsWeekly Downloads

    151

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • cloudratha