我一直在寻找一种方法,当点击位于页面顶部的按钮时,只使用CSS3进行向下滚动.
所以我找到了这个教程:http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
演示: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;
}
}