I'm creating a scrollable banner for my homepage with 'up' and 'down' button for user to scroll the banner. How do I make it so that the mouse scroller is able to scroll the banner too and also once I click on the down or up button the user will be able to see the transition of the banner scrolling upwards or downwards?

scroll script:

<script> 
var t = 0; 

function up() 
{ 
 t += 600; 

 with(document.getElementById("contents")) 
 { 
   if (t > 0) 
    t = 0; 

 if(style) 
    style.top = t + "px"; 
 else 
  setAttribute("style", "top: " + t + "px"); 
} 
} 

function down() 
{ 
 t -= 600; 

with(document.getElementById("contents")) 
{ 
  if(t < -clientHeight) 
      t = -clientHeight; 

  if(style) 
       style.top = t + "px"; 
  else 
       setAttribute("style", "top: " + t + "px"); 
  } 
 } 

</script>

scrollable banner:

<table width="950px" height="600px">
<tr>
<td valign="top">
  <div id="scrollable" style="height:600px; width:950px"> 
  <div id="contents" style="height:600px; width:950px">
  <table bgcolor="#dcdcdc" width="950px" height="600px">
  <tr>
  <td height="490px"></td>
  </tr>
  <tr>
  <td height="100px"><img src="images/banner_title.png"/></td>
  </tr>
  </table>
  <table bgcolor="#ffd07e" width="950px" height="600px">
  <tr>
  <td height="490px"></td>
  </tr>
  <tr>
  <td height="100px"><img src="images/banner_title.png"/></td>
  </tr>
  </table>

buttons:

<table>
<tr>
<td width="30px"><a href="javascript:void(0)" onClick="up()"><img src="images/arrow_up.png"/></a></td>
<td width="30px"><a href="javascript:void(0)" onClick="down()"><img src="images/arrow_down.png"/></a></td>
</tr>
</table>