CSS：纯CSS滚动animation
我一直在寻找一种方法来滚动下拉button，位于页面顶部使用CSS3只。
所以我find了这个教程： http : //tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
演示： http : //tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
但是我的需求有点太高级了，因为我只想让浏览器在页面顶部的一个button上点击一下，所以我想知道：是否可以在没有inputbutton的情况下执行这些CSS滚动条有一个锚标签？
HTML看起来像这样： <a href="#" class="button">Learn more</a>
我已经有一些CSS，我需要点击button触发：
/* 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; } }
你可以使用css3 :target伪select器来完成定位标记，当与当前URL的散列值相同的元素得到一个匹配时，这个select器将被触发。 例
知道这一点，我们可以结合这种技术，使用接近select器，如“+”和“〜”，通过目标元素谁select任何其他元素与当前url的散列匹配。 这个例子就像你在问什么。
那么，如果你没有任何问题，浏览器的支持（只有Firefox到目前为止），使用锚链接和这个单一的属性：
scroll-behavior: smooth;
请参阅MDN参考 。
所以，像这样使用它：
<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>
这是一个小提琴 。
这里也是一个水平和垂直滚动的小提琴 。
而对于支持webkit的浏览器，我已经有了很好的结果：
.myElement { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; // Added in from answer from Felix overflow-x: scroll; }
这使得滚动行为更像标准的浏览器行为 – 至less在我们正在testing的iPhone上运行得很好！
希望有所帮助，
埃德
