AnimateScrollNavigation.js - Single page navigation

AnimateScrollNavigation.js is a simple jQuery Plugin extending animateScroll plugin with Single Page Scroll Capabilities

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

sex shop sex shop sex shop sex shop sex shop seks shop spanish fly psikolog sohbet numara sohbet hatti

Source: github.com

1. INCLUDE JS FILES

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

2. HTML

<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>

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:

3. JAVASCRIPT

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

4. 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: {}
    });

5. API

There are few methods allowing to programatically use this navigation. Assuming you are using #fullpage as a selector, you can do some nice 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 anyanimateScroll options and optionally turn of any animation (defaults to false):

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