回到顶部练习

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>回到顶部</title>
  <style>
    #to_top {
      width: 30px;
      height: 40px;
      font: 14px/20px arial;
      text-align: center;
      background: #06c;
      position: fixed;
      cursor: pointer;
      color: #fff;
      left: 1050px;
      top: 500px;
    }
  </style>
</head>
<body style="height: 2000px;">

<div id="to_top">返回顶部</div>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
	// 平滑滚动到顶部
	var $topBox = $('#to_top')
	// 点击事件
	$topBox.click(function(){
		//获取页面元素
		var $page = $('html,body')
		// 获取总距离
		var $distance = $('html').scrollTop() + $('body').scrollTop()
		// 总时间
		var time = 400
		//间隔时间
		var $distanceTime = 30
		// 单位时间移动距离
		var $itemDistance = $distance / (time / $distanceTime)
		// 定时器定时滚动
		var intervalId = setInterval(function(){
			$distance -= $itemDistance
			// 判定是否到顶
			if($distance <= 0){
				$distance = 0 // 还原距离
				clearInterval(intervalId) 	//清除定时器
			}
			// 滚动
			$page.scrollTop($distance)			
		},$distanceTime)
		
	})
</script>
</body>

</html>

总结

间隔时间可以根据自身进行修改，以达到一个看上去更加柔顺的一个平滑过渡