jQuery-点击按钮实现回到顶部的两种方式

1.点击按钮，快速回到顶部

  
    
    My JSP 'practice_02.jsp' starting page
	
	
	    
	
	
	
	
		*{margin:0;padding:0;}
		.all {
			width:100%;
			height:180%;
		}
		.btn {
			position:fixed;
			bottom:20px;
			right:20px;
			width:80px;
			height:30px;
			border-radius:5px;
			background:red;
		}
	
  
  	
  	
  		回到顶部
  	
  	
	
		$('#btn1').click(function() {
			$('html,body').scrollTop(0);
		});
	
  

2.点击按钮，缓慢的回到顶部

在这里我们来讲解一下，具体实现原理 就拿看电影来举例子，我们所看的电影都是一帧一帧播放的，肉眼对于那细小的间隔是分辨不出来的，所以我们认为电影的放映都很流畅，其实是一段一段连起来的。同样我们要实现从下到上缓慢的上升，就是一段一段的动，并且每一段都是迅速到达目的地，这样连起来就成匀速的了

  
    
    
    My JSP 'practice_02.jsp' starting page
    
	
	
	    
	
	
	
	
		*{margin:0;padding:0;}
		.all {
			width:100%;
			height:180%;
		}
		.btn {
			position:fixed;
			bottom:20px;
			right:20px;
			width:80px;
			height:30px;
			border-radius:5px;
			background:red;
		}
	
  
  
  	
  	
  		回到顶部
  	
  	
	
		$('#btn1').click(function() {
			//总距离
			var distance = $('html').scrollTop()+$('body').scrollTop();
			//height为了更新当前滚动条的高度而用
			var height = $('html,body');
			//总时间(500ms)
			var time = 500;
			//每间隔intervalTime时间滚动一次
			var intervalTime = 50;
			//计算每次滑动的距离
			var itemDistance = distance/(time/intervalTime);
			//使用循环定时器不断滚动
			var intervalId = setInterval(function() {
				distance -= itemDistance;
				if(distance