当我输入代码时
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>
好的，您代码中的问题之一是 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
}
| 归档时间： |
|
| 查看次数： |
3048 次 |
| 最近记录： |