jQuery Inner Scrollbar Plugin with Smooth Scrolling Effect - Tween Scroller

Tween Scroller is a jQuery plugin used to create a vertical scrollbar on an inner DIV with smooth scrolling effect.

How to use it:

1. Create the html.

<div class="scroll-outer">
<div class="scroll-inner">
Your Content Here ...
</div>
</div>

2. Style the scrollbar.

.scroll-outer {
position: relative;
overflow: hidden;
}
.scroll-outer .scroll-inner {
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
.scroll-outer .scrollbar {
display: none;
position: absolute;
height: 50px;
width: 5px;
top: 0px;
right: 0px;
opacity: 0.7;
margin-left: 5px;
background: #BDAEAE;
border: 1px solid #E0E6E8;
border-radius: 6px;
}

3. Include jQuery javascript library and jQuery Tween Scroller Plugin at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bin/tween-scroller.js"></script>

4. Create some controls.

<button id="enable">enableScroll</button>
<button id="disable">disableScroll</button>
<button id="scrollMeTo">scrollMeTo</button>
<button id="scrollMeToTop">scrollMeToTop</button>
<button id="scrollMeToBottom">scrollMeToBottom</button>

5. The javascript.

<script>
var $scrollOuter = $('div.scroll-outer:eq(0)');
var $scrollInner = $('div.scroll-inner:eq(0)');

$scrollOuter.scroll({
minimalScrollbarHeight: 50,
accelerator: 4
});


$('#enable').click(function() {
$scrollOuter.enableScroll()
})
$('#disable').click(function() {
$scrollOuter.disableScroll()
})
$('#scrollMeTo').click(function() {
$scrollOuter.scrollMeTo(Math.random() * ($scrollOuter.outerHeight() - $scrollInner.outerHeight()))
})
$('#scrollMeToTop').click(function() {
$scrollOuter.scrollMeTo('top')
})
$('#scrollMeToBottom').click(function() {
$scrollOuter.scrollMeTo('bottom')
})

</script>

---

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