内容跳转 CSS 简介

在 HTML 中，我们经常需要创建一个链接来让用户跳转到一个新的页面或者某个特殊的位置。但是有时候，我们希望在同一个页面内进行“跳转”，不刷新页面的情况下访问另一个页面所在的位置，这时候就需要使用锚点。

锚点是一个 HTML 元素的 id 属性值，通过使用锚点，我们可以跳转到一个指定元素的位置。而为了让跳转过程更加平滑和优美，我们需要使用 CSS 来控制跳转时元素的滚动动画等效果。

在接下来的内容中，我们将简要介绍一些使用 CSS 控制内容跳转的方法：

scroll-behavior

CSS 中的 scroll-behavior 属性可以用来控制页面滚动的行为。默认情况下，当我们跳转到页面中某个指定元素时，页面会直接跳到指定元素的位置。但当我们通过 scroll-behavior: smooth 来设置页面滚动时，页面会平滑地滚动到指定元素的位置，就像在 App 中点击菜单栏时的效果。

代码片段

html {
  scroll-behavior: smooth;
}

:target

使用 :target 伪类可以匹配 URL 中的片段标识符（如 #foo），这样我们就可以为特定的锚点设置样式，每当 URL 中片段标识符与元素的 id 属性值匹配时，该元素就会被突出显示。

代码片段

/* 为特定的锚点设置样式 */
:target {
  color: red;
}

/* 或者通过指定锚点加上类名来设置样式 */
#section1:target,
#section2:target {
  background-color: yellow;
}

scroll-padding-top

当我们通过锚点跳转到页面中指定的元素时，可能会存在跳转后元素被遮盖的情况。此时，我们可以通过设置 scroll-padding-top 属性，让元素跳转后位于视图窗口的正中间。

代码片段

html {
  scroll-padding-top: 100px;
}

总结

在此，我们通过 scroll-behavior、:target 以及 scroll-padding-top 这三个 CSS 属性介绍了内容跳转的相关用法。通过对这些属性的理解和应用，我们可以实现更加美观和易用的网页跳转效果。