The purpose of this post is to show how to make a div container scroll when you hover your mouse over the up and down buttons.

Here's the link to the demo.

Let's first setup the HTML structure that we'll need to hold the scrollable content:

<div id="scroll-container">
	<div id="scroll-content">
		<p>Some really, really, really long content goes here. See the demo.</p>
	</div>
</div>

The "scroll-container" sets up the width and height that you want the box to be. The "scroll-content" is the inside box that actually holds the long wordage, images, etc. Essentially, the scroll-container is the window to the outside world. Here is the styles information required for these two div containers:

#scroll-container {
	overflow: hidden;
	height: 320px;
	width: 500px;
	position: relative;
	margin-right: -45px;
	padding-right: 45px;
}
#scroll-content {
	position: relative;
	top: 0;
}

Note the right margin and padding values. They are used to create an area for the buttons (used to control the scrolling of the content):

<div id="scroll-container">
	<div id="scroll-content">
		...
	</div>
	<div id="scroll-controls">
		<a href="#" class="up-arrow"></a><a href="#" class="down-arrow"></a>
	</div>
</div>

 The CSS for the button controls:

#scroll-controls {
	position: absolute;
	bottom: 0;
	right: 0;
	height: 100px;
	width: 32px;
}
#scroll-controls a.up-arrow {
	display: block;
	height: 45px;
	width: 32px;
	background: transparent url('up.png') no-repeat scroll left top;
	position: absolute;
	top: 0;
	left: 0;
}
#scroll-controls a.up-arrow:hover {
	background: transparent url('up-hover.png') no-repeat scroll left top;
}
#scroll-controls a.down-arrow {
	display: block;
	height: 45px;
	width: 32px;
	background: transparent url('down.png') no-repeat scroll left top;
	position: absolute;
	bottom: 0;
	left: 0;
}
#scroll-controls a.down-arrow:hover {
	background: transparent url('down-hover.png') no-repeat scroll left top;
}

Nothing too fancy here... just position the button controls to the bottom right of the scroll-container. The JavaScript:

function getTop() {
	// get the top of the content
	var top = $('#scroll-content').css('top');
	return trimPx(top);
}

function getHeight(id) {
	// get the height, including padding
	var height = $(id).height();
	var paddingTop = trimPx($(id).css("padding-top"));
	var paddingBottom = trimPx($(id).css("padding-bottom"));

	return height + paddingTop + paddingBottom;
}

function trimPx(value) {
	// remove "px" from values
	var pos = value.indexOf("px");
	if (pos != 0)
		return parseInt(value.substring(0, pos));
	else
		return 0;
}

var container;
var content;
var hidden;	// # of pixels hidden by the container

function setScrollerDimensions() {
	container = getHeight("#scroll-container");
	content = getHeight("#scroll-content");
	hidden = content - container;
}

function resetScroller() {
	setScrollerDimensions();
	$('#scroll-content').css('top', 0);
}

$(document).ready(function() {

	setScrollerDimensions();

	$('#scroll-controls a.up-arrow').click(function() {
		return false;
	});

	$('#scroll-controls a.down-arrow').click(function() {
		return false;
	});

	$('#scroll-controls a.down-arrow').hover(
		function() {
			if (hidden > 0) {
				var current = getTop();
				$('#scroll-content').animate({ top: -hidden }, Math.abs(current - hidden) * 5);
			}
		},
		function() {
			$('#scroll-content').stop();
		}
	);

	$('#scroll-controls a.up-arrow').hover(
		function() {
			if (hidden > 0) {
				var current = getTop();
				$('#scroll-content').animate({ top: "0" }, Math.abs(current) * 5);
			}
		},
		function() {
			$('#scroll-content').stop();
		}
	);
});

This JavaScript is obviously the meat-and-potatoes part of this post. I proportionately set the duration of the JQuery Animate function, so all of the scrolling movements appear to be at the same speed, whether the content needs to scroll 25px or 2500px.