#animatescrollnavigation.js

New Post has been published on http://www.htmluse.com/animated-scroll-navigation-js-single-page-navigation/

Animated Scroll Navigation.js - Single page navigation

Download   Demo

This jQuery Plugin AnimateScrollNavigation.js is a simple 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

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