jQuery Plugin For Side Tabs Scrolling - Scrolltab

Scrolltab is a fancy jQuery plugin which enables you attach floating tabs to the scrollbar of the browser that will smoothly scroll the page to the position indicated by the tab.

How to use it:

1. Load the latest jQuery library and jQuery Scrolltab plugin in your html document

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.scrolltab.js"></script>

2. Create the containers where you want to scroll to

<div class="scrolltab test1"></div>
<div class="scrolltab test2"></div>
<div class="scrolltab test3"></div>
<div class="scrolltab test4"></div>

3. The javascript

$(document).ready(function() {
// Have all scroll tabs expand on mouseover and detract on mouseleave
$('.scrolltab')
.click(function() {$(this).slideUp(); })
.scrolltab({
mouseenter: function() { 
$(this).stop().animate({width: '200px'}, 500);
}, 
mouseleave: function() { 
$(this).stop().animate({width: '50px'}, 500);
} 
});
// Change three of the pins to a specific classname (instead of the default)
$('.test2').scrolltab({classname: 'scrolltab-item1', title: 'Green'});
$('.test3').scrolltab({classname: 'scrolltab-item2'});
$('.test4').scrolltab({classname: 'scrolltab-item3'});
});

4. Default options.

title: '',
classname: 'scrolltab-item',
mouseenter: function(){},
mouseleave: function(){},
click: function(){}

Change log:

v1.0.5 (2014-08-21)

• Update.

v1.0.3 (2013-11-17)

• Added data attributes for setting title and pin class.

---

This awesome jQuery plugin is developed by cjsaylor. For more Advanced Usages, please check the demo page or visit the official website.