Clicking a Container's Section makes the page jump

Question

I have one of those profile page Containers that has links on the left, which you click to open tabled Sections. However when I click said links, the whole page force-scrolls (jumps) down to the top of the content in the Section, therefor cutting off anything above them on the page and being quite annoying.

Not sure if it's padding or margins or what, and I don't really want to start from scratch again.

The main HTML I have for details:

<div align="center">
    <style>
        .container {
            width: 650px; height: 250px;
            overflow: auto; overflow-y: hidden;
            border: 3px double #999999; background: black;
         }
       .section { height: 250px; overflow: auto;}
    </style>
    <table width="700px">
        <tr>
            <td>
                <div style="overflow: auto; width: 200px; height: 250px; border: 3px inset #999999;">
                    <br /><font color="#520000" size="5" face="Times"> Greetings. </font>
                    <br /><br /><a href="#profile"><font face="Courier" size="4">[ Introduction ]</font></a>
                    <br /><a href="#likes"><font face="Courier" size="4">[ Aye ]</font></a>
                    <br /><a href="#loathes"><font face="Courier" size="4">[ Nay ]</font></a>
                    <br /><a href="#media"><font face="Courier" size="4">[ Media ]</font></a>
                    <br /><a href="#music"><font face="Courier" size="4">[ Music ]</font></a>
                </div>
            </td>
            <td>
                <div class="container">
                    <a name="profile"></a>
                    <div class="section" align="right">
                        <br /> About me text here
                        <br />
                    </div>