锚链接代码跳转出现错误

<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
 <title></title>
</head>
<body>
 <!--此处填写代码-->
 <a name="顶部">这里是顶部</a>
 <p>
     <a href="#水果">水果</a><br />
     <a href="#蔬菜">蔬菜</a><br />
     <a href="#运动">运动</a><br />
 </p>
 <h2 id="水果">水果</h2>
    <ul>
        <li>香蕉</li>
        <li>苹果</li>
        <li>葡萄</li>
        <li>梨</li>
        <li>西瓜</li>
        <li>樱桃</li>
        <li>菠萝</li>
        <li>橙子</li>
        <li>柚子</li>
        <li>芒果</li>
    </ul> 
    <br />
    <a href="#顶部">返回顶部</a>
    <br />
    <h2><a name="蔬菜">蔬菜</a></h2>
    <ul>
        <li>西红柿</li>
        <li>黄瓜</li>
        <li>土豆</li>
        <li>芹菜</li>
        <li>蒜台</li>
        <li>西葫芦</li>
        <li>香菇</li>
        <li>菠菜</li>
        <li>豆角</li>
        <li>油菜</li>
    </ul> 
    <br />
    <a href="#顶部">返回顶部</a>
    <br />
    <a name="运动"><h2>运动</h2></a>
    <ul>
        <li>篮球</li>
        <li>足球</li>
        <li>羽毛球</li>
        <li>乒乓球</li>
        <li>排球</li>
        <li>高尔夫</li>
        <li>棒球</li>
        <li>橄榄球</li>
        <li>保龄球</li>
        <li>游泳</li>
    </ul> 
    <br />
    <a href="#顶部">返回顶部</a>
</body>
</html>

我的代码正确吗？我感觉没问题，但是每次点击目录中的水果，运动，蔬菜时不是跳到相对应锚点的位置，而是一个提示错误的页面