页面锚点，也叫跳转链接，是实现页面内导航的简单方法。比如，目录可以利用锚点链接，让读者直接跳转到页面中的不同部分。
简易的锚点
要创建一个页面锚点，只需要给一个元素添加一个 id 属性。就这么简单！你可以用各种元素作为页面锚点，但最常见的是使用标题。
<h1 id="my-anchor">页面锚点</h1>现在，你可以使用 # 加 id 作为 href 来链接到页面锚点。
<a href="#my-anchor">跳转到页面锚点</a>作为锚点链接的 href 属性，有两个特殊值：#top 或者简单的 #，它们的作用相同，都会跳转到页面的最顶部。不需要为它们创建页面锚点。
让我们看看这些锚点链接的实际效果。
演示 https://codersblock.com/assets/demos/anchor-links/basic
在演示中，你可以看到，点击锚点链接会在页面 URL 中添加一个哈希值（例如：#my-anchor），这个哈希值可以复制并用来直接链接到页面锚点。
现在，让我们看看添加一些 CSS 会带来什么效果。
添加平滑滚动
在之前的演示中，跳转到页面锚点是瞬间完成的，这可能会让人感到有点突兀。幸运的是，我们只需要用 CSS 就可以实现平滑滚动。
html {
scroll-behavior: smooth;
}现在，再来试试这些锚点链接。
演示 https://codersblock.com/assets/demos/anchor-links/smooth
添加滚动距离
到目前为止，我们的锚点链接将页面锚点滚动到视窗的最顶部。如果在锚点上面留点空白，是不是会更美观呢？我们可以通过在页面锚点上设置 scroll-margin-top 来实现。
h1 {
scroll-margin-top: 40px;
}这样，视窗顶部和页面锚点之间就会留出 40px 的空间。来试试看。
演示 https://codersblock.com/assets/demos/anchor-links/smooth-and-margin
当你的页面有固定头部时，这个技巧非常有用，可以让页面锚点稍微向下偏移，避免被固定头部遮挡。
添加目标页面锚点样式
你可以使用 CSS 的 :target 伪类，为跳转到的页面锚点添加样式。
h1:target {
color: #71a819; /* 绿色 */
}在这个演示中，点击 “跳转到页面锚点” 会启用上面的 CSS，使页面锚点文本变成绿色。点击 “跳转回顶部” 会取消 <h1> 的目标状态，所以文本不再是绿色。
演示 https://codersblock.com/assets/demos/anchor-links/smooth-and-margin-and-styling
更炫的锚点样式
我们可以用 :target 做更多事情，不只是改变文字颜色。下面这个演示会高亮显示内容区域，并让“返回顶部”链接动画进入视野。
演示 https://codersblock.com/assets/demos/anchor-links/fancier-styling
以下是一些 HTML 代码，展示了页面的基本结构。
<nav>
<a href="#kiwis">奇异果</a>
<a href="#limes">青柠</a>
<a href="#pears">梨</a>
</nav>
<article>
<h1 id="kiwis">奇异果</h1>
<p><!-- 关于奇异果的介绍 --></p>
</article>
<!-- 更多文章元素在这里 -->
<a class="back-to-top" href="#top">返回顶部</a>文章高亮效果是通过下面的 CSS 实现的。
/* 边框最初是透明的 */
article {
border: 3px solid transparent;
}
/* 当目标 h1 在文章内部时，边框会变为绿色 */
article:has(h1:target) {
border-color: #71a819;
}下面是显示/隐藏“返回顶部”链接的 CSS。
.back-to-top {
/* 将链接固定在右上角 */
position: fixed;
top: 10px;
right: 10px;
/* 链接最初淡出并移出视窗的右侧 */
opacity: 0;
translate: calc(100% + 10px);
/* 0.5 秒的过渡时间 */
transition: all 0.5s;
}
/* 当 body 中存在目标 h1 时，链接淡入并移入视野 */
body:has(h1:target) .back-to-top {
opacity: 1;
translate: 0px;
}嵌套滚动
到目前为止，所有示例都只有一个滚动容器：页面本身。但你可能遇到过嵌套滚动容器的情况，例如，页面中有一个可滚动的 <div> 元素。如果你在一个嵌套滚动容器中放置一个页面锚点，指向它的锚点链接会滚动所有必要的容器，将目标元素滚动到视野内。很酷吧！
下面是一个演示。注意滚动位置可能有点偏差，因为还没有添加 scroll-margin。我们将在下一节解释原因。
演示 https://codersblock.com/assets/demos/anchor-links/nested-scroll-without-padding
滚动边距VS滚动填充
现在让我们解决滚动位置问题。之前我们使用过 scroll-margin-top，但在 Chrome 和 Edge 中，它在这里不起作用。滚动边距不会扩展到嵌套滚动容器之外。
幸运的是，还有另一种方法可以解决这个问题。我们可以使用 scroll-padding 而不是 scroll-margin。它们的效果类似，但区别在于：
-
scroll-margin应用于页面锚点。 -
scroll-padding应用于滚动容器。
让我们用一些 scroll-padding 更新演示。
html {
scroll-padding-top: 130px;
}
.slide-container {
scroll-padding-inline: 20px;
}这样，页面顶部就会有一些较大的滚动填充，按钮会一直保持在视野中。它还在可滚动的 <div> 元素上添加了一些内联（左右）滚动填充，因此每个幻灯片在滚动容器中居中。
演示 https://codersblock.com/assets/demos/anchor-links/nested-scroll-with-padding
