我一直在寻找一种仅使用 CSS3 单击位于页面顶部的按钮时向下滚动的方法。
所以我找到了这个教程：http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
Demo: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
但这对于我的需求来说有点太先进了，因为我只想让浏览器通过单击位于页面顶部的一个按钮来向下滚动，所以我想知道：是否可以在没有输入按钮的情况下进行这些 CSS 滚动，只需带有锚标签？
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;
}
}
使用锚链接和scroll-behavior财产 （MDN 参考) 对于滚动容器：
scroll-behavior: smooth;
浏览器支持：Firefox 36+、Chrome 61+（因此还有 Edge 79+）、Safari 15.4+、Opera 48+。
Internet Explorer、非 Chromium Edge 和旧版本 Safari（某些用户仍在使用）do not支持scroll-behavior并简单地“跳转”到链接目标（优雅降级）。
用法示例：
<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具有水平和垂直滚动功能。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
