<html>
<head>
<style type="text/css">
body {
padding: 60px; /* general styling */
}
#viewport {
position: relative; /* REQUIRED */
width: 220px; /* content + button width */
height: 200px; /* adjust as desired */
overflow: hidden; /* REQUIRED */
border: 1px solid indigo; /* adjust as desired */
background: silver; /* adjust as desired */
}
#content {
position: absolute; /* REQUIRED -- or 'relative' */
top: 0; /* REQUIRED */
width: 200px; /* adjust as desired */
min-height: 200px; /* adjust as desired */
background: white; /* adjust as desired */
}
#content p {
margin: 0 0 20px; /* inside content formatting */
padding: 0; /* inside content formatting */
font-size: 0.8em; /* adjust as desired */
}
#scroll_up, #scroll_dn {
cursor: pointer; /* suggested */
position: absolute; /* suggested */
top: -1px; /* adjust as desired */
right: -1px; /* adjust as desired */
height: 20px; /* adjust as desired */
width: 20px; /* adjust as desired */
background: yellow; /* adjust as desired */
border: 1px solid indigo; /* adjust as desired */
}
#scroll_dn {
top: 19px; /* adjust as desired */
}
</style>
<!--[if IE]>
<style type="text/css">
#content {
height: 200px; /* same as min-height for IE */
}
</style>
<![endif]-->
<script type="text/javascript">
window.onload = function () {
var scroll_up = document.getElementById('scroll_up');
var scroll_dn = document.getElementById('scroll_dn');
var content = document.getElementById('content');
var pps = 40; // pixels per second scroll speed
// clears the scrolling behavior
scroll_up.click = scroll_target;
scroll_up.onmouseup = scroll_target;
scroll_up.onmouseout = scroll_target;
// activates scrolling behavior
scroll_up.onmousedown = function () {
scroll_target( 'up', content, pps );
};
// clears the scrolling behavior
scroll_dn.click = scroll_target;
scroll_dn.onmouseup = scroll_target;
scroll_dn.onmouseout = scroll_target;
// activates scrolling behavior
scroll_dn.onmousedown = function () {
scroll_target( 'dn', content, pps );
};
}
scroll_target.scroller;
function scroll_target ( direction, target, speed ) {
window.clearInterval( scroll_target.scroller );
if ( target ) {
var top = target.style.top;
target.style.top = ( top ) ? top : '0';
var max = target.offsetHeight - target.parentNode.offsetHeight;
scroll_target.scroller = window.setInterval ( function () {
top = target.style.top.match( /-?\d+/ );
if ( top < -max ) {
target.style.top = -max + 'px';
scroll_target();
return;
}
if ( top > 0 ) {
target.style.top = '0';
scroll_target();
return;
}
target.style.top = ( direction == 'up' ) ?
top - 1 + 'px' : top - 0 + 1 + 'px';
}, 1 / speed * 1000 );
}
}
</script>
</head>
<body>
<div id="viewport">
<div id="scroll_up"></div>
<div id="scroll_dn"></div>
<div id="content">
<p><strong>"Jack and Jill went up the hill"</strong></p>
<p>Jack and Jill went up the hill<br />
The fetch a pail of water;<br />
Jack feel down and broke his crown,<br />
And Jill came tumbling after.</p>
<p>Up got Jack and home did he trot,<br />
As fast as he could caper;<br />
Went to bed and bound his head,<br />
With vinegar and brown paper.</p>
<p>When Jill came in how she did grin<br />
To see Jack's paper plaster;<br />
Mother vexed, did whip her next;<br />
For causing Jack's disaster.</p>
</div>
</div>
</body>
</html>
Marked Solved 
Hope i dont break it further
Offline 
