滚动偏移HTML

Question

我正在尝试在HTML和CSS中做一些事情，但不确定它是否实际有效。

我想确保在滚动时添加某种“延迟”，就像减慢滚动速度一样，使其更加柔和。

有些网站确实可以做到，我曾经访问过一些页面滚动方式与其他网站不同，看起来很柔和。

这是可能的吗？

Answer 1

当然可以！要在您的网站上实现平滑滚动效果，您可以使用以下CSS规则：

html {
  scroll-behavior: smooth;
}

而要创建触发平滑滚动的内部链接，请在您的HTML中使用如下的锚点标签：

<a href="#section1">跳转到第一部分</a>
<a href="#section2">跳转到第二部分</a>

<section id="section1">
  <!-- 第一部分的内容 -->
</section>

<section id="section2">
  <!-- 第二部分的内容 -->
</section>

通过使用这种方法，您的网站滚动将感觉更加平滑，对用户更加舒适。