New Post has been published on Html Use
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):
$('#fullpage').animateScrollNavigation('goToAny', 'your-css-selector', animateScrollOptions, noAnimation);