One Page Scroll Nav Button - jQuery Section Scroller

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.