纯 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;
}
}
231775 次浏览
小开
最佳答案

您可以使用 css3 :target伪选择器使用锚标记，当与当前 URL 的散列 ID 相同的元素获得匹配时，这个选择器将被触发。例子

了解了这一点，我们可以将这种技术与使用邻近选择器(如“ +”和“ ~”)结合起来，通过目标元素选择任何其他元素，这些元素的 id 与当前 URL 的散列匹配。这方面的一个例子就是 你在问我。

小开

对滚动容器使用锚链接和 scroll-behavior属性(MDN 参考资料) :

scroll-behavior: smooth;

浏览器支持 : Firefox 36 + ，Chrome 61 + (因此也是 Edge 79 +) ，Safari 15.4 + ，Opera 48 + 。

IE 浏览器，非 Chromium Edge 和旧版本的 Safari (一些用户仍在使用) 不要支持 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>

这是 小提琴。

这里还有一个同时具有水平和垂直滚动的 小提琴。

小开

对于支持 webkit 的浏览器，我得到了很好的结果:

.myElement {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth; // Added in from answer from Felix
overflow-x: scroll;
}

这使得滚动行为更像标准的浏览器行为——至少在我们测试的 iPhone 上它工作得很好！

希望能帮上忙,

艾德

小开

您可以使用 CodePen 中的脚本，只需将所有内容包装在一个. levit-Container 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();
}();

Https://codepen.io/acauamontiel/pen/zxxebb?editors=0010


提交答案