AnimateScrollNavigation.js

A Simple jQuery Plugin extending animateScroll plugin with Single Page Scroll Capabilities

You can see demo here.

Why bother?

I needed jQuery plugin allowing me to nicely navigate around single page website and none I could find had all fetures I needed:

Smooth, continous scroll across sections
Ability to navigate to each and every section, also programatically
Possible menu integration, but I didin't want menu to be included as part of a package
Each section can have different hight
If section height is less then screen height - it can be adjusted
If section is higher then screen - we're cool
It had to support anchor links to sections, i.e. #section1
It would support History API

This is why I bothered writing this plugin. If its features are what you are looking for - that's perfect! :)

INSTALLATION

via bower:

bower install animatescroll-navigation

or simply download latest source code from repository: link

USAGE

First of all - you'll need jQuery, so make sure to include it before plugin itself. Plugin works with both v1.x and 2.x versions. You can use CDN if you'd like.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Secondly: This plugin uses animateScroll for handling all transitions, please also include it before animateScrollNavigation.js

<script src="path/to/animatescroll.min.js"></script>

Now: animateScrollNavigation.js

<script src="path/to/animate_scroll_navigation.min.js"></script>

animateScrollNavigation.js uses simple markup: one container, on which you call this plugin and an number of elements inside of it. You can set them with CSS selector, but it defaults to .section. Every section has to have id with anchor name, i.e. id="section3" - this is good, because you can always fallback to regular anchor link behaviour.

Let's say you'd like to have container #fullPage and standard sections containers .section:

<div id="fullpage">
    <div class="section" id="section1">
        section1
    </div>
    <div class="section" id="section2">
        section2
    </div>
    <div class="section" id="section3">
        section3
    </div>
    <div class="section" id="section4">
        section4
    </div>
</div>

After that only thing left to do is init animateScrollNavigation.js with default options by calling:

$(document).ready(function(){
    $('#fullpage').animateScrollNavigation();
});

Whole thing would look something like this:

<!DOCTYPE html>
<html>
    <head>
        <title>animateScrollNavigation.js Demo</title>
    </head>
    <body>
        <div id="fullpage">
            <div class="section" id="section1">
                section1
            </div>
            <div class="section" id="section2">
                section2
            </div>
            <div class="section" id="section3">
                section3
            </div>
            <div class="section" id="section4">
                section4
            </div>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="../bower_components/animatescroll/animatescroll.min.js"></script>
        <script src="../dist/animate_scroll_navigation.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#fullpage').animateScrollNavigation();
            });
        </script>
    </body>
</html>

Options

animateScrollNavigation.js accepts couple of parameters/startup options:

$('#fullpage').animateScrollNavigation({
        // selector for elements containing sections
        element: '.section',

        // determines if sections height should be calculated to match screen height
        fullPage: true,

        // disable animation (usefull for older browsers, etc.)
        noAnimation: false,

        // you can pass all animateScroll options, they will become global for all elements in navigation
        animateScrollOptions: {}
    });

API

There are few methods allowing to programatically use this navigation. Assuming you are using #fullpage as a selector, you can do some nce things, like:

Go to next section with:

$('#fullpage').animateScrollNavigation('next');

... or to previous section:

$('#fullpage').animateScrollNavigation('previous');

In order to go to particular section (i.e. section2), you can use this:

$('#fullpage').animateScrollNavigation('goTo', 'section2');

... or you can use sections ID. They are numbered from 0 up:

$('#fullpage').animateScrollNavigation('goTo', 1);

In order to get current section:

$('#fullpage').animateScrollNavigation('getCurrent');

// you'll get:
//  {
//      id: currentElementId,
//      max: allElementsCount
//  }

As this is based on animateScroll, you can go to any element, even not included in Navigation markup by calling goToAny() with CSS selector as a first parameter. You can also pass any animateScroll options and optionally turn of any animation (defaults to false):

$('#fullpage').animateScrollNavigation('goToAny', 'your-css-selector', animateScrollOptions, noAnimation);

Building / Minifing

You can build minified version yourself, by simply using Grunt in project root.

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request

sisihuisi / animatescrollnavigation.js Goto Github PK