不同页面锚链接问题。

来源：4-26 链接扩展功能

qq_pzq_0

2019-03-19 17:13:07

list.html(等同hello.html）中点击“蔬菜”进入content.html(等同imooc.html)时锚点“蔬菜”不在页面顶部（整个页面后面还有很多内容）。是什么原因造成的？我如何才能做出我想要的点击后“蔬菜”在顶部的效果。

写回答

3回答

Miss路

2019-03-19

已采纳

同学，你好。你写的代码是没有问题的。只不过你写的有列表的那个html里面的内容太短了，可以多加点内容，就看出效果来了，我帮你加了好多，你再测试一下试试看：

</html>
<!DOCTYPE HTML>
<html>

<head>
    <meta http-enquiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>content</title>
</head>

<body> <a name="fruit"></a> <h1>水果</h1>
    <p>
        <ul type="disc">
            <li>香蕉</li>
            <li>苹果</li>
            <li>葡萄</li>
            <li>梨</li>
            <li>西瓜</li>
            <li>樱桃</li>
            <li>菠萝</li>
            <li>橙子</li>
            <li>柚子</li>
            <li>香蕉</li>
            <li>苹果</li>
            <li>葡萄</li>
            <li>梨</li>
            <li>西瓜</li>
            <li>樱桃</li>
            <li>菠萝</li>
            <li>橙子</li>
            <li>柚子</li>
        </ul> <a href="hello.html#top">返回顶部</a>
    </p> <a name="vegetable"></a> <h1>蔬菜</h1>
    <p>
        <ul type="disc">
            <li>西红柿</li>
            <li>黄瓜</li>
            <li>土豆</li>
            <li>芹菜</li>
            <li>蒜台</li>
            <li>西葫芦</li>
            <li>香菇</li>
            <li>菠菜</li>
            <li>豆角</li>
            <li>油菜</li>
             <li>西红柿</li>
            <li>黄瓜</li>
            <li>土豆</li>
            <li>芹菜</li>
            <li>蒜台</li>
            <li>西葫芦</li>
            <li>香菇</li>
            <li>菠菜</li>
            <li>豆角</li>
            <li>油菜</li>

        </ul> <a href="hello.html#top">返回顶部</a>
    </p> <a name="sports"></a> <h1>运动</h1>
    <p>
        <ul type="disc">
            <li>篮球</li>
            <li>足球</li>
            <li>排球</li>
            <li>飞盘</li>
            <li>拓展</li>
            <li>羽毛球</li>
            <li>太极拳</li>
             <li>篮球</li>
            <li>足球</li>
            <li>排球</li>
            <li>飞盘</li>
            <li>拓展</li>
            <li>羽毛球</li>
            <li>太极拳</li>
            <li>篮球</li>
            <li>足球</li>
            <li>排球</li>
            <li>飞盘</li>
            <li>拓展</li>
            <li>羽毛球</li>
            <li>太极拳</li>
             <li>篮球</li>
            <li>足球</li>
            <li>排球</li>
            <li>飞盘</li>
            <li>拓展</li>
            <li>羽毛球</li>
            <li>太极拳</li>
            <li>排球</li>
            <li>飞盘</li>
            <li>拓展</li>
            <li>羽毛球</li>
            <li>太极拳</li>
             <li>篮球</li>
            <li>足球</li>
            <li>排球</li>
            <li>飞盘</li>
            <li>拓展</li>
            <li>羽毛球</li>
            <li>太极拳</li>
             <li>太极拳</li>
            <li>排球</li>
            <li>飞盘</li>
            <li>拓展</li>
            <li>羽毛球</li>
            <li>太极拳</li>
             <li>篮球</li>
            <li>足球</li>
            <li>排球</li>
            <li>飞盘</li>
            <li>拓展</li>
            <li>羽毛球</li>
            <li>太极拳</li>
        </ul> <a href="hello.html#top">返回顶部</a>
    </p>
</body>

</html>

记得改一下文件跳转的链接。

如果帮助到了你，欢迎采纳！

hq_pzq_0

h 我刚刚试了下确实是内容数量的问题，非常感谢。

h019-03-19

共1条回复

Miss路

2019-03-19

同学，你好。问代码的问题需要粘贴你的完整代码，这样才能准确、高效的找出你的问题，如果老师照着你的截图敲代码的话，可能很多问题就规避了，比如你的错别单词、错别符号等，也非常的耗时。

祝学习愉快！

hq_pzq_0

h 实在不好意思老师，是我没有考虑到，以下是代码，麻烦了。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>list</title> </head> <body> <a name="top"></a> <h3>这里是顶部</h3> <p> <a href="content.html#fruit">水果</a><br/> <a href="content.html#vegetable">蔬菜</a><br/> <a href="content.html#sports">运动</a><br/> </p> </body> </html> <!DOCTYPE HTML> <html> <head> <meta http-enquiv="Content-Type" content="text/html;charset=UTF-8"/> <title>content</title> </head> <body> <a name="fruit"></a> <h1>水果</h1> <p> <ul type="disc"> <li>香蕉</li> <li>苹果</li> <li>葡萄</li> <li>梨</li> <li>西瓜</li> <li>樱桃</li> <li>菠萝</li> <li>橙子</li> <li>柚子</li> </ul> <a href="list.html#top">返回顶部</a> </p> <a name="vegetable"></a> <h1>蔬菜</h1> <p> <ul type="disc"> <li>西红柿</li> <li>黄瓜</li> <li>土豆</li> <li>芹菜</li> <li>蒜台</li> <li>西葫芦</li> <li>香菇</li> <li>菠菜</li> <li>豆角</li> <li>油菜</li> </ul> <a href="list.html#top">返回顶部</a> </p> <a name="sports"></a> <h1>运动</h1> <p> <ul type="disc"> <li>篮球</li> <li>足球</li> <li>排球</li> <li>飞盘</li> <li>拓展</li> <li>羽毛球</li> <li>太极拳</li> </ul> <a href="list.html#top">返回顶部</a> </p> </body> </html>

h019-03-19

共1条回复

qq_pzq_0

提问者

2019-03-19

希望各位大佬能给点意见，谢谢大家。