JavaScript实现回到顶部/底部的两种方法

HTML代码：

<div class="back-top disNone" id="back-top">
	<span><i class="fa fa-arrow-up"></i></span>
</div>
<div class="back-end" id="back-end">
	<span><i class="fa fa-arrow-down"></i></span>
</div>

CSS代码：实现按钮固定在页面右侧

/*侧边栏*/
.fixed-slider .back-top{
	position: fixed; 
	bottom:9%; 
	right: 1%;
	z-index: 9; 
} 
.fixed-slider .back-end{
	position: fixed; 
	bottom:2%; 
	right: 1%;
	z-index: 9; 
} 
.fixed-slider span i{
	color: #ADADAD;
	font-size: 20px;
	border: 2px solid #ADADAD;
	padding: .4em;
}

方法一：利用jQuery实现回到顶部/底部的实现

JS代码（注意需要加载jQuery库）：

//回到顶部/底部方法一
		$(document).ready(function(){
			
			//回到顶部按钮的显示/隐藏代码			
			//隐藏返回顶部按钮
			$("#back-top").hide();
			
			//显示返回顶部按钮
			$(function(){		
				var height = $(document).height();//页面高度
				var wheight = $(window).height();//窗口高度
				
				$(window).scroll(function(){
					if ($(this).scrollTop() > 100){
						$('#back-top').fadeIn();
					} else {
						$('#back-top').fadeOut();
					}			
					if($(this).scrollTop() < height - wheight){
						$('#back-end').fadeIn();
					} else {
						$('#back-end').fadeOut();
					}
				});
				
				//点击回到顶部
				$('#back-top').click(function(){					
					$('body,html').animate({
						scrollTop:0
					},'fast');
					return false;
				});			
				
				//回到底部
				$('#back-end').click(function(){
					$('html,body').stop();
					$('html,body').animate({
						scrollTop:height
					},'fast');
				});
			});					
		});		

方法二：纯JavaScript实现

		window.onload = function() {
			var timer = null;
			var backTop = document.getElementById("back-top");
			var height = document.documentElement.clientHeight;
			//或者自定义设置高度
			var height = 150;
			
			window.onscroll = function(){
				if(document.body.scrollTop >= height){
					backTop.style.display = "block";
				} else {
					backTop.style.display = "none";
				}
			};
			
			backTop.addEventListener('click', function(){
				timer = setInterval(function(){
					var top = document.body.scrollTop;
					var speed = top / 5;
					document.body.scrollTop = top - speed;
					
					if(top == 0){
						clearInterval(timer);
					}
				},30);
			});
		};

事实上，以上两种方法实现效果差不多，第二种方法按钮的显示隐藏没有缓慢变化效果。方法一主要是通过jQuery实现fadeIn，和fadeOut，方法二通过添加speed参数，实现返回的缓慢变化效果。

实现效果：

滚动条未滚动，只显示返回底部按钮：

滚动条滚动了一部分，既显示返回顶部按钮，又显示返回底部按钮：

滚动条滚动到页面底部，只显示返回顶部按钮：

以上！