html锚点定位（锚点链接：name还是id，一文搞定）

最新推荐文章于 2025-03-21 19:05:50 发布

行走的程序喵

最新推荐文章于 2025-03-21 19:05:50 发布

阅读量1.4w

点赞数 18

分类专栏： html 文章标签： html html5 前端恰饭定位

本文链接：https://blog.csdn.net/haifeng_ck/article/details/109644753

版权

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用HTML中的锚点链接来实现页面内的导航功能，包括定义锚点、创建指向锚点的链接等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

锚点链接是超链接的一种.锚点可以连接到文档中的某一个特定位置.对于较长的页面来说,使用锚点链接可以
快速定位到页面中的某一个位置,提升用户体验.

锚点链接的使用场景一般有以下两种:

跳转到当前页面的指定位置
跳转到其他页面的指定位置

注意

定义锚点可以使用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>