Section Scroller
Lightweight, cross-browser and easy to use jQuery plugin for smooth scrolling to next section on click of a button!
Demo
Usage
Install using NPM (optional)
npm install section-scroller Include
<head> <!-- Include CSS for section scroller button --> <!-- This following line is optional. Required when using scrollType effects other than "linear" or "swing". --> <script src="jquery.easings.min.js"></script> <script src="sectionscroller.min.js"></script> </head>Tip: For section scroller button styling, you can use the scrollerButtonSampleCSS.css provided or you can use custom style as per your requirements.
HTML
<div class="section-scroll">Content...</div> <div class="section-scroll">Content...</div> <div class="section-scroll">Content...</div> ... <div id="section-scroller-button"> <i class="caret"></i> </div>Tip: For section scroller button, you can use carret class (CSS in scrollerButtonSampleCSS.css). You can also easily replace it with icons from Font Awesome or any other vendor.
jQuery
$(document).ready(function () { $(".section-scroll").sectionScroller({ // Options scrollerButton: "#section-scroller-button" }); });Options
This is the default configuration:
$(".section-scroll").sectionScroller({ scrollerButton: "#section-scroller-button", scrollerButtonRotateClass: "rotate", scrollType: "swing", scrollDuration: 1000, offset: 0, fixedNavbar: null, onScrollStart: function () {}, onScrollEnd: function () {} });".section-scroll" is the CSS selector for sections of the page.
| Options | Default | Description |
|---|---|---|
| scrollerButton | "#section-scroller-button" | CSS selector for element on clicking of which, scrolling to the next section will happen. |
| scrollerButtonRotateClass | "rotate" | Class added to the scroller button(to rotate the scroller button direction, etc.) when the last section or the bottom of page is reached. |
| scrollType | "swing" | Animation / Easing while section scrolling. Can easily be extended using jQuery Easing Plugin. |
| scrollDuration | 1000 | Duration of the section scroll. |
| offset | 0 | Offset (pixels) from the top for all sections, e.g., offset: 10. For setting offset for individual sections, see below. |
| fixedNavbar | null | CSS Selector for fixed top navbar if any. Useful in responsive websites where height of fixed navbar changes in different screen sizes, e.g., fixedNavbar: ".navbar-fixed-top". |
| onScrollStart | Callback Function | Callback function fired on start of the section scrollling. |
| onScrollEnd | Callback Function | Callback function fired on start of the section scrollling. |
For setting offset for individual sections, use data-scroll-offset HTML Data Attribute as shown below:
<div class="section-scroll" data-scroll-offset="30">Content...</div>Extra Option(s) Available Inside Callbacks
this.scrollToElementIndex (Number) - index of the destination section - starting with 0 by default.
License
This project is licensed under the MIT License (http://opensource.org/licenses/MIT).
