Section Scroll is a lightweight jQuery solution for single page websites. The plugin automatically generates a side bullet navigation on one page websites and when the navigation is clicked, the user is smoothly taken to the required section.
Implementing the plugin is quite easy. Have a look at the steps below.
Link the required files:
First of all, you need to include the required files so the plugin works properly.
In the <head>..</head> of your document, link the css file.
<!-- -----Styles----- --> <link rel="stylesheet" type="text/css" href="css/section-scroll.css">
Before the ending </body> tag add the needed scripts:
<!-- -----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 the plugin and customize
You need to call the plugin to make everything work smoothly.
<script type="text/javascript">
$(document).ready(function () {
$('body').sectionScroll(); // Easy Peasy Lemon Squeezy
})
</script>
Defaults settings:
bulletsClass: 'section-bullets', sectionsClass: 'scrollable-section', scrollDuration: 1000, titles: true, topOffset: 0, easing: ''
For more options, visit Section Scroll website.