Scrollpane using Simple JQuery with mouseover/click event

If you are looking for a script that causes contents to scroll on mouseover/click event , then its a simple tutorial, which you can extend more as per your requirements. The html markup is as follows:

<!-- HTML MarkUp for Scrollpane Starts Here -->
<div id="scrollPane">
<div id="scroll_content">
<!-- Your Content Starts Here -->
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
Javascript Scrollpane tutorial code
<!-- Your Content Ends Here -->
</div>
<div id="arrow_container">
<img id="uparrow" src="images/up.jpg" alt="up arrow" />
<div id="verticalGap"></div>
<img id="downarrow" src="images/down.jpg" alt="down arrow" />
</div>
</div>
<!-- HTML MarkUp for Scrollpane Ends Here -->

the main function that responsible for all actions are as follows:


function ScrollPane(width,height,speed,mouseOver)
{
var NAV_WIDTH = 20, NAV_HEIGHT=28, H_TOL=20;

var y, diff,
container=$("#scrollPane"),
content = $("#scroll_content"),
nevigator=$("#arrow_container"),
upArrow = $("#uparrow"),
downArrow = $("#downarrow"),
verticalGap = $("#verticalGap");

container.css('width',width);
container.css('overflow','hidden');
container.css('position','absolute');

nevigator.css('height',height);
nevigator.css('width',NAV_WIDTH);
nevigator.css('float','right');

verticalGap.css('height',height-NAV_HEIGHT);

y = content.attr("offsetTop");
content.css('top',y);
content.css('position','absolute');
content.css('width',width-NAV_WIDTH);
content.css('z-index',1);
content.css('z-index',2);
diff = y-content.attr("offsetHeight")+H_TOL;

if(mouseOver)
{
upArrow.bind('mouseover',GoUp);
upArrow.bind('mouseout',Stop);

downArrow.bind('mouseover',GoDown);
downArrow.bind('mouseout',Stop);
}
else
{
upArrow.bind('mousedown',GoUp);
upArrow.bind('mouseup',Stop);

upArrow.bind('mousedown',GoDown);
upArrow.bind('mouseup',Stop);
}

function GoUp()
{
content.animate({top:(y)},10000/speed);
}

function GoDown()
{
content.animate({top:(diff)},10000/speed);
}

function Stop()
{
content.stop();
}
}

Now, initialize it on page load like as follows:

$(document).ready(Initialize);
function Initialize()
{
//The settings that you can change
//width= The width of the area you want to made scroll
var width = 300,height=200,speed=5,mouseOver=true;

var test = new ScrollPane(width,height,speed,mouseOver);
}

This is a very simple example, you can extend it, modify as like you want & very easy to understand. So, hope this will help you.