超链接锚点返回页面顶部问题

<a href="#"></a>

<a href="#top"></a>

这两种情况都会返回页面顶部，各自的原理是什么？有什么区别吗？

苍天的庭师之珏 2021-12-20

源自：多媒体与语义化标签 2-10 超级链接（2）

16

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2021-12-20 10:54:49

同学你好，对于你的问题解答如下：

1、href="#" 表示跳转到当前页面的顶部，可以理解为是一种特殊的方式，特殊记忆下。

2、href="#top" 表示跳转到id属性值为top的元素所在位置，只有当该元素位于页面顶部时，href="#top" 和href="#" 两者的效果才是一样的。

祝学习愉快~

苍天的庭师之珏提问者 #1

自己未设置id属性值为top的元素，href="#top"仍然生效，是转化为href="#"的形式，还是浏览器内置了这个锚点，还是其他原因？

2021-12-21 15:56:58
好帮手慕慕子回复提问者苍天的庭师之珏 #2

可以简单理解为是浏览器内置了这个锚点，这里涉及到了js相关的知识，因为在js语法中，提供了一个top属性，该属性返回对一个顶级窗口的只读引用，所以直接设置#top也可以返回到页面顶部。同学可以将其作为一个特殊知识点，特殊记一下。
实际开发中，推荐设置锚点时，明确指定锚点要跳转位置所在的元素，提高代码的可阅读性。
祝学习愉快~

2021-12-21 17:08:18

相似问题

不定高，好像使用锚点返回不了顶部啊

关于回到顶部

老师，请检查代码

在网页插入返回网页一的锚点链接为什么回不去

锚点跳转

登录后可查看更多问答，登录/注册

前端工程师

参与学习人
提交作业 15661 份
解答问题 17891 个

入行前端，是明智的选择！市场需求大，就业前景好，入行门槛低，小白易上手全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建

本课精华内容

问答作业

老师,请问vscode有哪些好用的插件推荐一下...

157 1

老师,API具体是指什么呢?

75 1

老师,这两种情况为什么得到的结果不一样?

31 2

没有思路

200 5

老师给点提示。

155 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载