使用滚动行为：仅使用 CSS 的一页平滑答案

【问题标题】：Using scroll-behavior: smooth for only one page with CSS使用滚动行为：仅使用 CSS 的一页平滑
【发布时间】：2021-03-27 05:08:13
【问题描述】：

当我输入代码时

html {
    scroll-behavior: smooth;
}

我得到了我想要的锚链接的平滑效果。但是，我只希望这种效果适用于单个页面，而不是我的整个网站。所以我想也许这会起作用，使用我想要这个效果的单个页面的 body 标签的类。

.landing-page {
    scroll-behavior: smooth;
}

但是，一旦我这样做了，效果就不起作用了，即使使用检查工具显示此属性已应用于.landing-page。为什么它不起作用，接下来我应该尝试什么？

编辑：这是HTML。我试图让它平滑滚动到#how-it-works，并且只有那个锚。

<body class="landing-page welcome">
<div class="page first">
  <div class="container">
    <div class="heading">
      <a class ="anchor" id="how-it-works"></a>
      <span class="primary-text">
        You have before you the best system for deeply learning math.
      </span>
      <span class="secondary-text">
        Online, real tutors, at your own pace. Ask anything.
      </span>
    </div>
  </div>
</div>
</body>

【问题讨论】：

我已经添加了答案，但如果您可以添加代码，那么我可能会提供更好的帮助。
注意滚动行为：平滑； Safari 或 IE 不支持
您实际上选择的答案不仅没有正确解释问题的原因，而且还做了一些不必要的事情，例如将overflow: scroll 添加到根元素。这不仅是不必要的（正如我在回答中所解释的，将平滑滚动添加到根会使视口平滑滚动）；使用scroll 而不是auto 意味着总是有一个滚动条，不管是否需要。

标签： css

【解决方案1】：

好的，您的代码中的一个问题是body标签不支持平滑滚动，尝试向您的html标签添加一个类或一个id，或者只是将它添加到该页面内联编码，但这真的取决于你会有什么限制。

html.landing-page {
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.container {
 width: 200px;
 marging: auto;
}

<html class="landing-page">
<body class="welcome">
<div class="page first">
  <div class="container">
    <div class="heading">
      <a class ="anchor" id="how-it-works"></a>
      <span class="primary-text">
        You have before you the best system for deeply learning math.
      </span>
      <span class="secondary-text">
        Online, real tutors, at your own pace. Ask anything.
        Online, real tutors, at your own pace. Ask anything.
        Online, real tutors, at your own pace. Ask anything.
        Online, real tutors, at your own pace. Ask anything.
        Online, real tutors, at your own pace. Ask anything.
        Online, real tutors, at your own pace. Ask anything.
        
      </span>
    </div>
  </div>
</div>
</body>
</html>

另一种方法是将代码放在 div 而不是 HTML 中，但您必须为此做一些变通方法。

.landing-page {
  overflow-y: scroll;
  scroll-behavior: smooth;
  display: block;
  height: 100vh; // test with smaller heights
}

【讨论】：

如果你给我更多关于你的尝试会有帮助的代码，我会添加一些额外的假设你有什么但如果你给我们更多细节可以在以后改变
再试一次告诉我
谢谢！向 HTML 标记添加一个类是可行的。我不应该将它用于body标签。
上面的 marging 应该是 margin 但 StackOverflow 不允许我编辑它，因为“编辑必须至少有 6 个字符”。 Somelight，你能自己修一下吗？

【解决方案2】：

scroll-behavior CSS 属性设置滚动框在由导航或 CSSOM 滚动 API 触发滚动时的行为。
在根元素上指定此属性时, 它适用于视口。 body 元素上指定的此属性不会传播到视口。

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

所以你有两个选择。

要么指定一个 CSS 类，如

.smooth-scroll { 滚动行为：平滑； }

并将其放在该特定页面中的 HTML 标记上（推荐方式）。

让你的身体成为一个滚动元素：

身体{ 边距：0；高度：100vh；溢出-y：自动； }

并将您的 CSS 类放在该页面的正文上。

【讨论】：