我一直在寻找一种在使用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;
}
}
答案 0 :(得分:97)
好吧,如果你不介意supporting not all major browsers(只有Firefox 36 +,Chrome 61+和Opera 48+),请使用锚链接和滚动容器的这个属性:
scroll-behavior: smooth;
请参阅MDN reference。
像这样使用:
<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,包括水平和垂直滚动。
答案 1 :(得分:84)
您可以使用css3 :target
伪选择器使用锚标记来执行此操作,当与当前URL的哈希具有相同ID的元素获得匹配时,将触发此选择器。 Example
知道这一点,我们可以将这种技术与使用邻近选择器(如“+”和“〜”)结合起来,通过目标元素选择任何其他元素,这些元素的id与当前url的哈希匹配。这方面的一个例子就像you are asking。
答案 2 :(得分:-1)
您可以通过将所有内容包装在.levit-container DIV中来使用CodePen中的脚本。
~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();
}();
答案 3 :(得分:-3)
对于支持webkit的浏览器,我得到了很好的结果:
.myElement {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth; // Added in from answer from Felix
overflow-x: scroll;
}
这使得滚动表现得更像标准的浏览器行为 - 至少它在我们测试的iPhone上运行良好!
希望有所帮助,
版