HTML 锚点 - 技术栈

当一个html网页内容很长的时候，用户在浏览这个网页的时候可能会有些不方便，比如已经滚动到了底部之后想返回到顶部，那么只能拖动滚动条到顶部（或者刷新页面，但这个做法体验不好），效果比较好的方法就是设置锚点来处理这个问题,实现页内或跨页跳转。

示例演示锚点

xml 复制代码

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>基础教程,锚点设置</title></head><body>
     <a href="#bottom" name="top">去底部</a>
    <div style="height: 5000px; width: 300px; background-color: #123">这里演示如何跳转到页面头部和底部</div>
    <a href="#top" name="bottom">回到顶部</a></body></html>

(一)、页面内跳转设置方法一：

设置一个锚点链接<a href="#miao">去找喵星人</a>；（注意：href属性的属性值最前面要加#）
在页面中需要的位置设置锚点<a name="miao"></a>；（注意：a标签中要写一个name属性，属性值要与 $1$ 中的href的属性值一样，不加#）标签中按需填写相应的文字，一般不写内容。

(二)、页面内跳转设置方法2：

设置一个锚点链接<a href="#miao">去找喵星人</a>；（注意：href属性的属性值最前面要加#）
设置锚点的位置 <h4 id="miao">喵星人基地</h4>；在要跳转到的位置的标签中添加一个id属性，属性值与①中href的属性值一样，不加#

注意：方法二不用单独添加一个a标签来专门设置锚点，只在需要的位置的标签中添加一个id即可。

xml 复制代码

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>锚点教程</title>
</head>
<body>
    <ul>
        <li><a href="#miao">去找喵星人</a></li>
        <li><a href="#wang">去找汪星人</a></li>
        <li><a href="#meng">其他萌物</a></li>
    </ul>

    <a name="miao"></a><!--设置锚点方法1-->
    <h3 id="miao">喵星人基地</h3><!--设置锚点方法2-->
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    
    <a name="wang"></a>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>

    <a name="meng"></a>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
</body>
</html>

引用

菜鸟教程