Table - Anchors - Rows

Row 1 Row 2 Row 3 Row 4 Row 5 Scroll to Top

Readme
Row 1
This example shows how you can scroll to rows within a table.

The script allows you to scroll up or down to the row required
The basic concept is to nest the table in a div with a fixed height and then scroll the div to the row required

Row 2
You do not have to set a height for the TD cells but to get a uniform look for this example I have set the divs height to 200px, the table has a cell spacing of 10px and the TD cells height is set at 180px, this effectively centralises the row.
Row 3
If the value of variable rowStop is set to zero the scrolling stops at the top of the row irrespective of the cell spacing or cell padding used.

If you change the value of variable rowStop to myTable.cellSpacing the scrolling stops at the top of the row minus the cellspacing value as this example shows.

Row 4
You can use colspan as normal		 Or have more than 1 cell in a row
Row 5
Footer
 

<HTML>
<HEAD>
<TITLE>Table - Anchors</TITLE>

<script type="text/javascript">

scrollSteps = 10

timer=""
function scrollDiv(rowNum){
clearTimeout(timer)
myTableDiv=document.getElementById("mytablediv")
myTable=document.getElementById("mytable")

rowStop=0

if(myTableDiv.scrollTop <= myTable.rows[rowNum].offsetTop-scrollSteps-rowStop){
myTableDiv.scrollTop=myTableDiv.scrollTop+scrollSteps
timer=setTimeout("scrollDiv('"+rowNum+"')",10)

if(myTableDiv.scrollTop>(myTableDiv.scrollHeight-myTableDiv.offsetHeight)-scrollSteps){
clearTimeout(timer)
myTableDiv.scrollTop=myTableDiv.scrollHeight-myTableDiv.offsetHeight
}

}
else{

if(myTableDiv.scrollTop >= myTable.rows[rowNum].offsetTop+scrollSteps-rowStop){
myTableDiv.scrollTop=myTableDiv.scrollTop-scrollSteps
timer=setTimeout("scrollDiv('"+rowNum+"')",10)
}
else{
clearTimeout(timer)
myTableDiv.scrollTop=myTable.rows[rowNum].offsetTop-rowStop
}

}

}

function toTop(){
myTableDiv=document.getElementById("mytablediv")
clearTimeout(timer)
if(myTableDiv.scrollTop >= scrollSteps){
myTableDiv.scrollTop=myTableDiv.scrollTop-scrollSteps
timer=setTimeout("toTop()",10)
}
else{
clearTimeout(timer)
myTableDiv.scrollTop=0
}

}

</script>

<style>
#mytablediv{width:400px;height:200px;overflow:auto;border:1px solid #8e8462}
#mytable{line-height:20px;border:1px solid #c9bda9}
#mytable td{border:1px solid #c9bda9}

</style>

</HEAD>
<BODY>


<a href="#null" onclick="scrollDiv(1)">Row 1</a> 
<a href="#null" onclick="scrollDiv(2)">Row 2</a> 
<a href="#null" onclick="scrollDiv(3)">Row 3</a> 
<a href="#null" onclick="scrollDiv(4)">Row 4</a> 
<a href="#null" onclick="scrollDiv(5)">Row 5</a> 
<a href="#null" onclick="toTop()">Scroll to Top</a>

<BR>

<div id="mytablediv">
<table border="0" cellspacing=10 cellpadding=10 id="mytable">
<tbody>
<tr><td height="30" align="center">Header</td></tr>
<tr>
<td valign="top">
<div>Row 1</div>
This example shows how you can scroll to rows within a table.
<P>The script allows you to scroll up or down to the row required</td>
</tr>
<tr>
<td><div>Row 2</div>
The scroll point is to the top of the td cell irrespective of the cell spacing or cell padding used</td>
</tr>
<tr>
<td valign="top"><div>Row 3</div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae purus.
Ut eget elit. Cras pellentesque vehicula justo.
Praesent a tellus. Donec enim orci, scelerisque nec, sodales sed, facilisis in, velit. 
</td>
</tr>
<tr>
<td valign="top"><div>Row 4</div>Donec rutrum elementum diam.
Donec gravida ligula. Phasellus vel risus et urna fermentum condimentum. Nulla facilisi.
Maecenas in arcu. Vivamus auctor interdum nulla. </td>
</tr>
<tr>
<td valign="top"><div>Row 5</div>Mauris et ligula.
Donec vitae leo. In pharetra. In mi arcu, ultricies eget, sollicitudin quis, convallis et, pede.
Cras id erat vitae justo cursus iaculis. Duis lacinia dolor a augue. In hac habitasse platea dictumst.
Donec fringilla. Fusce quis quam. Donec interdum.
Ut congue, ipsum nec sollicitudin sollicitudin, arcu purus sollicitudin ante, eget lacinia lacus tortor ut odio.
</td>
</tr>
<tr><td height="30" align="center">Footer</td></tr>
</tbody>
</table>
</div>

</BODY>
</HTML>