Section Scroll – jQuery Plugin with Side Bullet Navigation

section-scroll-jquery-plugin

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: ''

DEMO DOWNLOAD


For more options, visit Section Scroll website.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *