瞬间回到顶部:
$('html,body').scrollTop(0)
平缓回到顶部:
第一种方法:
使用自定义动画:
$('body,html').animate({scrollTop:0},300) //设置动画时长。让滚动条匀速回到顶部
第二种方法:
设置定时器,定义每一帧滚动条上移的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#to_top {
width: 30px;
height: 40px;
font: 14px/20px arial;
text-align: center;
background: #06c;
position: absolute;
cursor: pointer;
color: #000;
top:1500px;
right: 100px;
z-index: 999;
}
</style>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script>
$(function(){
$('#to_top').click(function(){
var distance = $('body').scrollTop() + $('html').scrollTop();//获取滚动条距离顶部的距离
//如果diatance ==0 不执行
//定义动画执行总时长 每一帧执行的时长
//每一帧上移的距离 == 滚动条距离顶部的距离 / (动画执行的总时长 / 每一帧执行的时长)
var time = 1000;
var t = 10;
var dis = distance / (time/t);
var id = setInterval(function () {
distance -= dis;
if(distance <=0)
{
distance = 0;
clearInterval(id);
}
$('html,body').scrollTop(distance);
},t)
console.log(distance);
})
})
</script>
</head>
<body style="height: 1500px;">
<div id="to_top">返回顶部</div>
</body>
</html>