Scroll DIV position to focussed TextBox using jQuery

hello,

i have this on div and 7 textboxes, what i want to achieve is

1. div with 200height max

2. so it shows 3 textbox at a time not more than 3 textbox

3. so on start it shows textbox 1 , textbox 2 and textbox 3

4. when user click on textbox3 so it should push upside textbox1 and textbox 2 and user can see textbox3 textbox 4 and textbox 5

5. now when user click on textbox 5 so textbox 3 and textbox 4 move upside and user can see textbox 5 textbox 6 and text box 7

6. vice versa if user again click on textbox 5 so it should downside textbox 6 and textbox 7 and user can textbo 3 4 and 5

so all the time only 3 textbox should be visible

here is my html

<div style="max-height: 200px; overflow: hidden;">
    <br /><br /><br />
    TextBox 1  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /><br /><br />
    TextBox 2  <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br /><br /><br />
    TextBox 3  <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br /><br /><br />
    TextBox 4  <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br /><br /><br />
    TextBox 5  <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox><br /><br /><br />
    TextBox 6  <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox><br /><br /><br />
    TextBox 7  <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox><br /><br /><br />
    <br /><br /><br /><br />
</div>