Synchronize Scrolling of Two Multiline TextBoxes using jQuery

HTML:

<div class="bigDiv">
<h2>Click and scroll in the left textbox to see the synchronized scroll in right textbox</h2><br /><br />
<asp:TextBox ID="tb1" runat="server" TextMode="MultiLine"
Text="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
Tooltip="Click on scrollbar to see the scroll on right box" Rows="5"/>

<asp:TextBox ID="tb2" runat="server" TextMode="MultiLine" Text="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
Rows="5"/>
<br /><br />
Tip: Scrolling the right textbox does not affect the left one.
</div>

Jquery Script:

<script type="text/javascript">
$(function() {
var $tb1 = $('textarea[id$=tb1]');
var $tb2 = $('textarea[id$=tb2]');
$tb1.scroll(function() {
$tb2.scrollTop($tb1.scrollTop());
});
});
</script>