section-scroll.js|可生成垂直整页滚动导航的jQuery插件 A jQuery plugin for automatically making scrollable sections navigation

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:

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

})