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参数，实现返回的缓慢变化效果。

实现效果：

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

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

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

以上！