纯CSS滚动动画
我一直在寻找一种方法，当单击位于页面顶部的按钮时，仅使用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;
}
}回答 3
Stack Overflow用户
发布于 2013-07-14 04:26:53
您可以使用css3 :target伪选择器对锚标签执行此操作，当与当前URL的散列具有相同id的元素匹配时，将触发此选择器。Example
了解了这一点，我们可以将这种技术与使用"+“和"~”之类的接近选择器结合起来，通过与当前url的散列匹配的目标元素来选择任何其他元素。这方面的一个例子就是you are asking。
Stack Overflow用户
发布于 2017-12-06 00:57:14
您可以使用CodePen中的脚本，只需将所有内容包装在.levit容器DIV中即可。
~function () {
function Smooth () {
this.$container = document.querySelector('.levit-container');
this.$placeholder = document.createElement('div');
}
Smooth.prototype.init = function () {
var instance = this;
setContainer.call(instance);
setPlaceholder.call(instance);
bindEvents.call(instance);
}
function bindEvents () {
window.addEventListener('scroll', handleScroll.bind(this), false);
}
function setContainer () {
var style = this.$container.style;
style.position = 'fixed';
style.width = '100%';
style.top = '0';
style.left = '0';
style.transition = '0.5s ease-out';
}
function setPlaceholder () {
var instance = this,
$container = instance.$container,
$placeholder = instance.$placeholder;
$placeholder.setAttribute('class', 'levit-placeholder');
$placeholder.style.height = $container.offsetHeight + 'px';
document.body.insertBefore($placeholder, $container);
}
function handleScroll () {
this.$container.style.transform = 'translateZ(0) translateY(' + (window.scrollY * (- 1)) + 'px)';
}
var smooth = new Smooth();
smooth.init();
}();Stack Overflow用户
发布于 2015-08-11 19:02:00
对于支持webkit的浏览器，我已经获得了很好的结果：
.myElement {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth; // Added in from answer from Felix
overflow-x: scroll;
}这使得滚动行为更像标准浏览器行为-至少它在我们测试的iPhone上工作得很好！
希望这能有所帮助，
边缘
https://stackoverflow.com/questions/17631417
复制相似问题