我一直在寻找一种仅使用 CSS3 单击位于页面顶部的按钮时向下滚动的方法。
所以我找到了这个教程:http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
演示:http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
但它对我的需求来说有点太高级了，因为我只想让浏览器在单击页面顶部的一个按钮时向下滚动，所以我想知道:是否可以在没有输入的情况下进行这些 CSS 滚动按钮，只是带有 anchor 标记？
HTML 看起来像这样:<a href="#" class="button">Learn more</a>
我已经有一些 CSS 需要在点击按钮时触发:
/* Button animation tryout. */
.animate {
animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveDown{
0% {
transform: translateY(-40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
最佳答案
为滚动容器使用 anchor 链接和 scroll-behavior 属性 ( MDN reference ):
scroll-behavior: smooth;
Browser support : Firefox 36+、Chrome 61+(因此还有 Edge 79+)、Safari 15.4+、Opera 48+。
Internet Explorer、非 Chromium Edge 和旧版本的 Safari(一些用户仍在使用)不支持滚动行为，只是“跳转”到链接目标(优雅降级)。
示例用法:
<head>
<style type="text/css">
html {
scroll-behavior: smooth;
}
</style>
</head>
<body id="body">
<a href="#foo">Go to foo!</a>
<!-- Some content -->
<div id="foo">That's foo.</div>
<a href="#body">Back to top</a>
</body>
这是一个 Fiddle .
这里还有一个 Fiddle水平和垂直滚动。
关于css - 纯CSS滚动动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17631417/