以往这个效果会首选使用js借助计时器设置body的滚动条位置，这样的好处是低版本浏览器也可以兼容，但是动画不如css3的transition来的流畅。现在手头的项目主要是在移动端上看的，所以考虑效果优化，至于低版本仅保证基本功能可以使用。 tranisition支持过渡效果的属性必须是css的属性，所以直接设置scrollTop是无法触发过渡动画的，所以考虑类似的属性变通实现。marginTop是最容易想到的css属性，具体做法是让body的marginTop等于负的滚动条高度，然后设置滚动条高度为0。 需要注意，设置marginTop成负值前必须先清除transition属性，否则动画过渡会导致设置无效，下面是实现的代码。
<meta charset='utf-8' />
<style>
html,body,div{
margin: 0;
width:100%;
min-height:100%;
line-height: 0;
padding-left: 30px;
position: relative;
}
</style>
<body>
<div>
<script>
for(var i=0;i<30;i++)
document.write('<p style="font-size:'+(i+12)*2+'px">'+i+'</p>');
</script>
</div>
</body>
<script src='https://www.xdelve.com/js-lib/plus/jquery.js'></script>
<script type="text/javascript">
$(document).click(function(){
$('body').css({
transitionDuration:'0s',
marginTop:-$(document).scrollTop()
});
$(document).scrollTop(0);
$('body').css({
transition:'.6s all ease-in-out',
marginTop:0
});
});
</script>相关文档
暂无
随便看看
畅言模块加载中