参见英文答案 >
CSS: pure CSS scroll animation3
只需纯粹的CSS就可以平滑滚动.
只需纯粹的CSS就可以平滑滚动.
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;
}
我知道：目标可以帮助,但我不知道如何使用它与转换.
解决方法
您可以使用纯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是完成之前以ms为单位的延迟.
