Scrolling automatically to some part of the link when clicking the anchor tag in html and rails

<div align=”center”>
<table border=”1″ cellspacing=”1″ width=”500″ id=”table1″>
<tr>
<td>
<div align=”left” id=”top”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100″ id=”table2″>
<tr>
<td><a href=”#home”>HOME</a></td>
</tr>
<tr>
<td><a href=”#about”>ABOUT</a></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td height=”500″ valign=”top”><span id=”home”>HOME AREA</span>
<a href=”#top”>Go Top</a></td>
</tr>
<tr>
<td valign=”top” height=”700″><span id=”about”>ABOUT AREA</span>
<a href=”#top”>Go Top</a></td>
</tr>
<tr>
</table>
</div>
$(document).ready(function(){
$(“.scroll”).click(function(event){
//prevent the default action for the click event
event.preventDefault();

//get the full url – like mysitecom/index.htm#home
var full_url = this.href;

//split the url by # and get the anchor target name – home in mysitecom/index.htm#home
var parts = full_url.split(“#”);
var trgt = parts[1];

//get the top offset of the target anchor
var target_offset = $(“#”+trgt).offset();
var target_top = target_offset.top;

//goto that anchor by setting the body scroll top to anchor top
$(‘html, body’).animate({scrollTop:target_top}, 500);
});
});