jQuery: Kiosk Up Down Scroll Buttons

I was once tasked with creating a Kiosk for a company I am working at. It was decided to use a Web based design for the kiosk. MS IE 8 was used in Kiosk mode to lock the user to the Web site. A WAMP (Windows, Apache, MySQL, PHP) server was used to provide the site at localhost. JQuery was used within the Web site. One of the issues was the slider navigation, which was almost impossible to use.

So, with jQuery’s help, a couple of buttons were created. Home and Contact buttons were placed on the left and Up and Down slider buttons were placed on the left.  scrollTo() was used to position the window relative to the current position. That allowed the Up and Down buttons to function. The Windows scroll() was then watched for action so that the buttons could be repositioned after the scroll action. It was amazingly simple with jQuery.

<div id="scrollers_home" style="position: absolute; z-index: 8888; left: 0; top: 10px;">
 <a href="/"><img src="/images/scrollers_home.gif" alt="Home" width="100" height="99" border="0" id="relative-position-home"></a>
</div>
<div id="scrollers_contact" style="position: absolute; z-index: 8888; left: 0; top: 120px;">
 <a href="/contact.php"><img src="/images/scrollers_contact.gif" alt="Home" width="100" height="99" border="0" id="relative-position-contact"></a>
</div>
<div id="scrollers_up" style="position: absolute; z-index: 8888; right: 0; top: 10px;">
 <img src="/images/scrollers_up.gif" alt="Up" width="100" height="99" border="0" id="relative-position-up">
</div>
<div id="scrollers_down" style="position: absolute; z-index: 8888; right: 0; top: 120px;">
 <img src="/images/scrollers_down.gif" alt="Down" width="100" height="99" border="0" id="relative-position-down">
</div>
<script type="text/javascript">
 $('#relative-position-down').click(function() {
 $.scrollTo( '+=440px', 300, { axis:'y' } );
 });
 $('#relative-position-up').click(function() {
 $.scrollTo( '-=440px', 300, { axis:'y' } );
 });
 $(window).scroll(function() {
 $("#scrollers_home").css("top", ($(window).scrollTop()+10) + "px");
 });
 $(window).scroll(function() {
 $("#scrollers_contact").css("top", ($(window).scrollTop()+120) + "px");
 });
 $(window).scroll(function() {
 $("#scrollers_up").css("top", ($(window).scrollTop()+10) + "px");
 });
 $(window).scroll(function() {
 $("#scrollers_down").css("top", ($(window).scrollTop()+120) + "px");
 });
</script>