WHAT IS THIS?

SECTION SCROLL is a jquery plugin for automatically making scrollable section navigation.

plugin

HTML


INCLUDE

<!-- -----Styles----- -->
<link rel="stylesheet" type="text/css" href="css/section-scroll.css">


<!-- -----Scripts----- -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js">


<!-- This is optional, if you want to use easings then please include jquery.easing.1.3.js. See options -->
<!-- Get it here (Please buy him a beer) http://gsgd.co.uk/sandbox/jquery/easing/-->
<script type="text/javascript" src="js/jquery.easing.1.3.js">   


<!-- Last but not least  -->           
<script type="text/javascript" src="js/jquery.section-scroll.js">


HTML

<div class="scrollable-section" data-section-title="About Us"></div> 
<div class="scrollable-section" data-section-title="Example"></div> 
<div class="scrollable-section" data-section-title="Testimonials"></div>

scrollable-section
Assign this class to each section you want to use as part of the navigation. 

data-section-title
Plugin picks this attribute's value to use as each menu item's title, e.g. right now it says HTML in navigation.

Call and Customize


Call Him

<script type="text/javascript"> 

    $(document).ready(function () { 
        $('body').sectionScroll(); // Easy Peasy Lemon Squeezy 
    }) 

</script>

Defaults

bulletsClass: 'section-bullets',
sectionsClass: 'scrollable-section',
scrollDuration: 1000,
titles: true,
topOffset: 0,
easing: ''

Options

Variable Type Example Description 
bulletsClass
 string
bulletsClass: 'my-class'
 This will override plugin's default class of bullet navigation, you can change this incase if you have your own styling. 
sectionsClass
 string
sectionsClass: 'my-sections'
 If you define your own class then you will use 
<div class="my-sections"></div>
plugin will no more look for 'scrollable-section' class it will look for your defined class and generate bullets.		 
scrollDuration
 int
scrollDuration: 3000
 Time it takes to scroll from one section to the other 
titles
 boolean
titles: false
 Setting it to false will hide the titles from navigation 
topOffset
 int
topOffset: 100
 Setting topOffset to 100 will cause the section to scroll but keep 100px distance from the top of window 
easing
 string
easing: 'easeInOutQuart'
 By default plugin uses no easing effects and this example uses 'easeInOutQuart', if you want to use easings you have to include
this plugin http://gsgd.co.uk/sandbox/jquery/easing/
Easings cheat sheet: http://easings.net/

Events

Event Description 
section-reached
 This event is called every time a section is scrolled into view. 
$('body').on('section-reached', function(){ 
    console.log('section-reached'); 
})

More

Plugin also gives us access to active section through variable 
activeSection
For example we can do this: 
$('body').on('section-reached', function(){

    var section_title = $('body').sectionScroll.activeSection.data('section-title');
    alert(section_title);

})


Let's suppose we have 
<section class="scrollable-section" data-short-description="We love coding"></section>

Now we can get short description and print that in our imaginary div 
$('body').on('section-reached', function(){

    var short_description = $('.body').sectionScroll.activeSection.data('short-description');
    $('div').html(short_description);
    $('body').sectionScroll.activeSection.css('background-color', '#000'); // Let's change background color of active section

})