One Page Scroll Nav Button - jQuery Section Scroller
File Size: | 43.9 KB |
---|---|
Views Total: | 2876 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Section Scroller is a jQuery plugin for creating a one page scrolling website with a smart navigation button, which allows the user to navigate through the page sections with a smooth scrolling effect.
How to use it:
1. Add the section scroller button to the page sections as follows:
<div class="section-scroll"> Content 1 </div> <div class="section-scroll"> Content 2 </div> <div class="section-scroll"> Content 3 </div> ... <div id="section-scroller-button"> <i class="caret"></i> </div>
2. Style the section scroller button in the CSS.
#section-scroller-button { position: fixed; right: 60px; bottom: 50px; height: 60px; width: 60px; border-radius: 50%; background-color: #ff9800; color: white; z-index: 10; cursor: pointer; -webkit-box-shadow: 0 8px 42px -10px rgba(0, 0, 0, 0.85); box-shadow: 0 8px 42px -10px rgba(0, 0, 0, 0.85); } .caret { position: absolute; top: 0; width: 5px; height: 5px; display: inline; margin: 22px 23px; padding: 3px; border-bottom: solid 3px #fff; border-right: solid 3px #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; }
3. Rotate the section scroller button as you reach the last section.
#section-scroller-button.rotate .caret { top: 4px; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); }
4. Add jQuery library and the jQuery Section Scroller plugin to the web page.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="sectionScroller.min.js"></script>
5. The JavaScript to enable the section scroller button.
$(".section-scroll").sectionScroller({ scrollerButton: "#section-scroller-button" });
6. To add custom easing effects to the smooth scrolling, follow these steps:
<script src="/path/to/jquery.easing.min.js"></script>
$(".section-scroll").sectionScroller({ scrollerButton: "#section-scroller-button", scrollType: "swing" });
7. Override the default duration of the smooth scrolling.
$(".section-scroll").sectionScroller({ scrollerButton: "#section-scroller-button", scrollType: "swing", scrollDuration: 900 });
8. Specify the fixed top navbar.
$(".section-scroll").sectionScroller({ fixedNavbar: null // CSS selector });
9. Add custom CSS classes to the section scroller button.
$(".section-scroll").sectionScroller({ scrollerButtonRotateClass: "rotate", });
10. Callback functions.
$(".section-scroll").sectionScroller({ onScrollStart: function () {}, onScrollEnd: function () {} });
Change log:
2017-11-29
- Added more useful options and callback functions.
This awesome jQuery plugin is developed by rishabh-rajgarhia. For more Advanced Usages, please check the demo page or visit the official website.