HTML & JavaScript Structure Back to Top

<div id="custom-navigation" class="default-theme">
    <ul>
    	<li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>         
    </ul>        
</div>
              
<div id="container">
	<div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>           
</div>

All demo pages imports three Javascript files.

1. jQuery
2. doScroller scripts
3. Bootstrap script

1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
2. doScroller scripts allows users to scroll one page at a time and you can transform your website into a single page scroll website.
3. Bootstrap js does't necessary but i have used bootstrap in all demo files so that i have added bootstrap script.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.doscroller.js"></script>
<script>
    jQuery(document).ready(function($){
        $('#container').doScroller({ 
            pageClass: 'section',
            nav: '#custom-navigation', 
            scrollOffset: -50 //Adjust the destination point of each page with a positive or negative integer.
        }); 
    });    
</script>

Generate Navigation via Array Using HTML5 Markup Back to Top

<header class="navigation-container"></header>

<section> <article>Home</article> </section>
<section> <article>About us</article> </section>
<section> <article>Features</article> </section>
<section> <article>Services</article> </section>
<section> <article>Contact us</article> </section>

<footer>  <article>Footer</article> </footer>

$('body').doScroller({
    nav: ['Home', 'About us', 'Features', 'Services', 'Contact us'],
    HTML5Enabled: true,           	            	
    navPlaceHolder:'.navigation-container' //Class or Id where you want to add Navigation.
    navClass:'navbar', //Claas name of navigation.
    scrollOffset: -50 //Adjust the destination point of each page with a positive or negative integer. 
});

// Note: If HTML5 mode true then there is no need to specify "pageClass". It will consider "Section" tag as a page.

Deep linking Back to Top

$('#container').doScroller({ 
    deepLink:true
});

//Please note that IE7 does not support history API so that deeplinking feature will works but we can't change page using back button and forward button of browser.

API Usage Back to Top

$('#container').doScroller();

//Animates page to next section.
doScroller.next();

//Animates page to previous section.
doScroller.prev();

//Animates page to fifth section.
doScroller.goTo(5); //pass integer value as per page number

//Returns index value of the current section
doScroller.current;

Options Back to Top

Sources and Credits Back to Top

Plugins and others stuff included

1. Images from Iconfinder
2. Twitter Bootstrap

Once again, thank you so much for purchasing doScroller. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question relating to the plugin on Codecanyon, please feel free to email us.

doScroller Team