Demo Fiddle

Question

如何使用纯css进行平滑滚动。

我有这段代码Fiddle

HTML

<a id="up" href="#down">down</a>
<div class="up"></div>

<a id="down" href="#up">up</a>
<div class="down"></div>

CSS

.up {
    width:100px;
    height: 600px;
    background-color: red;
}

.down {
    width:100px;
    height: 400px;
    background-color: yellow;
}

我知道:target可以提供帮助，但我不知道如何将其与transition一起使用。

Answer 1

您需要使用target选择器。

这是另一个例子的小提琴：http://jsfiddle.net/YYPKM/3/

Answer 2

你可以使用纯CSS执行此操作，但您需要对偏移滚动量进行硬编码，如果您要更改页面内容，这可能不太理想 - 或者您的内容尺寸应该改变窗口调整大小。

您最有可能使用例如jQuery，特别是：

$('html, body').stop().animate({
   scrollTop: element.offset().top
}, 1000);

完整的实施可能是：

$('#up, #down').on('click', function(e){
    e.preventDefault();
    var target= $(this).get(0).id == 'up' ? $('#down') : $('#up');
    $('html, body').stop().animate({
       scrollTop: target.offset().top
    }, 1000);
});

其中element是要滚动到的目标元素，而1000是完成前的毫秒延迟。

Demo Fiddle

好处是，无论您的内容维度发生什么变化，都不需要更改该功能。

只用纯CSS顺畅滚动

2 个答案:

Demo Fiddle