HTML网页内锚点链接：返回顶部标题及嵌入无序列表方法

核心结论：必须使用id #

你之前用普通外部链接没成功，是因为外部链接指向的是其他网站/页面，而页面内滚动需要用内部锚点，这就必须给顶部的目标元素设置id来定位。

具体实现步骤 #

1. 给页面顶部的标题（或任意你想滚动到的顶部元素）添加id：

<!-- 比如页面最顶部的标题 -->
<h1 id="page-top">我的页面标题</h1>

2. 在页面末尾添加回顶部链接：
   直接用<a>标签，href属性值设为#加刚才的id：

<a href="#page-top">回到顶部</a>

3. 将链接嵌入无序列表：
   把上述<a>标签放到<li>标签里，再套进<ul>即可：

<ul>
  <li><a href="#page-top">回到顶部</a></li>
  <li>其他列表项1</li>
  <li>其他列表项2</li>
</ul>

完整测试示例 #

<!DOCTYPE html>
<html>
<head>
  <title>回顶部功能测试</title>
  <style>
    /* 给页面设置足够高度，方便测试滚动效果 */
    body {
      height: 2000px;
      padding: 0 20px;
    }
    footer {
      margin-top: 1500px;
    }
  </style>
</head>
<body>
  <h1 id="page-top">这是页面顶部标题</h1>
  
  <!-- 这里可以填充任意页面内容 -->
  <p>页面内容区域...</p>
  
  <footer>
    <ul>
      <li><a href="#page-top">回到顶部</a></li>
      <li>版权声明</li>
      <li>隐私政策</li>
    </ul>
  </footer>
</body>
</html>

内容的提问来源于stack exchange，提问作者Bella