html锚点定位（锚点链接：name还是id，一文搞定）
程序员文章站
2022-03-12 22:07:58
锚点链接是超链接的一种.锚点可以连接到文档中的某一个特定位置.对于较长的页面来说,使用锚点链接可以快速定位到页面中的某一个位置,提升用户体验.锚点链接的使用场景一般有以下两种:跳转到当前页面的指定位置跳转到其他页面的指定位置注意定义锚点可以使用name属性或者id属性;html5去掉了name属性,建议使用id定义锚点(如果是在a标签上定义锚点,可以使用name属性);如果是页面顶部的锚点,可以省略不写(为了提高代码的可读性,建议不要省略);
锚点链接是超链接的一种.锚点可以连接到文档中的某一个特定位置.对于较长的页面来说,使用锚点链接可以
快速定位到页面中的某一个位置,提升用户体验.
锚点链接的使用场景一般有以下两种:
- 跳转到当前页面的指定位置
- 跳转到其他页面的指定位置
注意
- 定义锚点可以使用name属性或者id属性;
- html5去掉了name属性,建议使用id定义锚点(如果是在a标签上定义锚点,可以使用name属性)文末有彩蛋哦~????????????;
- 如果是页面顶部的锚点,可以省略不写(为了提高代码的可读性,建议不要省略);
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AnchorLink</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.container {
background-color: antiquewhite;
width: 80vw;
height: 200vh;
margin: 0 auto;
position: relative;
text-align: center;
line-height: 50px;
}
.container span {
color: #f10215;
}
.container .link {
float: right;
color: aqua;
cursor: pointer;
background-color: #f10215;
}
.container .link:hover {
color: yellow;
}
.top {
width: 100%;
height: 50px;
background-color: #666;
}
.bottom {
width: 100%;
height: 50px;
background-color: #666;
position: absolute;
left: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<!--页面顶部id锚点(可以省略,建议不要省略以提高代码可读性)(页面内部锚点)-->
<div id="top" class="top">
<span>top</span>
<!--a标签的href属性指定要跳转的锚点-->
<a href="#bottom" class="link">去bottom????</a>
</div>
<!--其他页面锚点(url + # + 锚点名称)-->
<a href="https://www.jd.com/#J_footer" target="_blank">点击跳转到京东首页底部位置</a>
<div class="bottom">
<span>bottom</span>
<!--a标签中定义锚点可以使用name属性-->
<!--跳转到页面顶部时,href属性可以简写为 href="#"(建议不要省略,以提高代码可读性)-->
<a name="bottom" href="#top" class="link">去top????</a>
</div>
</div>
</body>
</html>
文末彩蛋！！！
在a标签中使用name定义锚点，会有警告⚠哦~
因为HTML5已经弃用了name属性！！！！！
所以，建议所有的锚点定义都使用id，并且不要省略！！！
本文地址：https://blog.csdn.net/haifeng_ck/article/details/109644753