实现回到顶部的功能，根据学了元素滚动实现，温习知识点。
做之前先理清一下步骤和思路：
1、获得页面的滚动长度
var $page = $("html,body");
var distance = $("html").scrollTop()+$("body").scrollTop();
2、设置总时间
var time = 500;
3、设置间隔时间
var intervalTime = 50;
4、使用循环定时器不断滚动
5、/到达顶部, 停止定时器
//获得每次滑动的距离
var interdistance = distance/(time/intervalTime);
var inervaltimer = setInterval(function(){
distance -= interdistance;
if (distance<=0) {
distance = 0;
// 到达顶部, 停止定时器
clearInterval(inervaltimer);
}
$page.scrollTop(distance);
},intervalTime)
大概的设计应该差不多都是这样子，接下来的就是不同的场景举一反三
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #to_top{ width: 30px; height: 40px; background: blue; font: 15px/20px arial; position: fixed; top: 700px; left: 1850px; text-align: center; color: #fff; cursor: pointer; } </style> </head> <body style="height: 2000px;"> <div id="to_top">返回顶部</div> <script type="text/javascript" src="../../../js/jquery-1.10.1.js" ></script> <script type="text/javascript"> $("#to_top").click(function(){ //设置则使用$("html,body") //获取的话，则使用分开的形式 //$("html,body").scrollTop(0); var $page = $("html,body"); //获得滑动的总长度 var distance = $("html").scrollTop()+$("body").scrollTop(); //滑动所需要的时间 var time = 500; //间隔时间 var intervalTime = 50; // 使用循环定时器不断滚动 //获得每次滑动的距离 var interdistance = distance/(time/intervalTime); var inervaltimer = setInterval(function(){ distance -= interdistance; if (distance<=0) { distance = 0; // 到达顶部, 停止定时器 clearInterval(inervaltimer); } $page.scrollTop(distance); },intervalTime) }) </script> </body> </html>