一个人最愉快的是一辈子干自己热爱的事业，一个人最痛苦的是一辈子干自己不喜欢的事业。
现今网站基本上使用到返回顶部这一个功能，它们实现的方式也大同小异。实现的方法也非常多，但是每一种实现方式都是不同的，征对性也不同，下面通过三个案例来说说这一功能的实现。
案例1：锚链接，#id
返回顶部
锚链接是实现同一个页面间的定位，如果页面要定位到哪个位置，只需要将#id设置成定位布局的id，那么要返回顶部的功能，只需要把#id改成顶部布局（如div）的id即可，也可以直接设置成#（如果直接设置#会重新加载该页面，所以使用要谨慎）。
锚链接适用于页面布局间导航，不合适实现返回顶部功能。
案例2：窗体直接向上滚动到顶部。
//实现返回顶部功能标签a//jQuery实现返回顶部$(.go-top).bind(click,function(){$(window).scrollTop(0);});
这种方法实现起来也非常简单，使用jQuery给超链接a标签绑定点击事件，通过$(window).scrollTop(0);将整个窗体快速的滚动到距离顶部为0的位置来达到返回顶部效果，这种方法滚动到顶部的速度非常快，几乎是瞬变。
注意：1、href=”javascript:;”取消超链接访问，执行javascript方法，这里的方法为空所以不执行，或者使用href=”javascript:void(0);”代替。
2、$(‘.go-top’).bind(‘click’,function(){//实现逻辑});这是jQuery绑定事件的方法，click为点击，function(){}为回调方法。
案例3：也是本次所要实现最终目标。
先看一下本案例实现的效果是什么样：仔细看页面右下角的图标变化，观察效果。
效果1：当页面加载完成之后，返回顶部图标未显示，但是当向下滚动一定的距离之后，返回顶部图标显示出来，要实现这一效果我们要对窗体滚动事件进行监听window.onscroll。效果2：点击返回顶部图标，页面会以匀减速的方式向上滚动，视觉效果会好很多，要实现匀减速我们要用到setInterval定时器。
实现：在这里采用javascript，实现案例3。
同样是通过a标签实现，至于如何实现固定在页面右侧，这里只需要使用position:fixed固定定位即可。
步骤1、首先要在页面加载完成之后就马上实现窗体滚动事件监听和对标签a点击监听，使用javascript提供的window.onload()方法实现。在该方法中我们不仅仅要实现窗体滚动事件监听和对标签a点击监听，还要实现全局变量的定义，如定时器timer。
window.onload=function(){//获取返回按钮varbackupBtn=document.getElementById("btn_backup");//获取页面可视区域的高度varclientHeight=document.documentElement.clientHeight;vartimer=null;//定义定时器变量varisTop=true;//是否返回顶部//滚动滚动条时候触发window.onscroll=function(){//实现逻辑};//返回顶部按钮点击事件backupBtn.onclick=function(){//实现逻辑};};
步骤2、我们要在窗体滚动事件监听里面实现对返回顶部图片的显示和隐藏，这里采用的是如果滚动的高度大于窗口的可视区域的高度时显示，否则隐藏。
//获取页面可视区域的高度varclientHeight=document.documentElement.clientHeight;//滚动滚动条触发window.onscroll=function(){//获取滚动条到顶部高度-返回顶部显示或者隐藏varosTop=document.documentElement.scrollTop
document.body.scrollTop;if(osTopgt;=clientHeight){backupBtn.style.display="block";}else{backupBtn.style.display="none";}//如果是用户触发滚动条就取消定时器if(!isTop){clearInterval(timer);}isTop=false;};
这里有两个特别小心的地方：
（1）、varosTop=document.documentElement.scrollTop
document.body.scrollTop;获取滚动条到顶部高度，这里是为了兼容不同的浏览器，所以要这样写。
（2）、clearInterval(timer);该方法实现取消定时器，我们要在页面返回到顶部的时候，要及时取消定时器。
步骤3、我们要在返回顶部图标按钮点击的时候触发定时器。
backupBtn.onclick=function(){//设置定时器timer=setInterval(function(){//获取滚动条到顶部高度varosTop=document.documentElement.scrollTop
document.body.scrollTop;vardistance=Math.floor(-osTop/6);document.documentElement.scrollTop=document.body.scrollTop=osTop+distance;isTop=true;if(osTop==0){clearInterval(timer);}},30);};
这里通过滚动条到顶部的距离document.documentElement.scrollTop=document.body.scrollTop=osTop+distance;来改变页面对顶部的距离。
注意：vardistance=Math.floor(-osTop/6);这是获取每次要移动的距离，因为是向上移动所以要取负值-，并且要通过Math.floor()该方法是向下取整，如果不调用Math.floor()方法，-osTop/6将永远都不接近于0，这样会导致滚动条会一直在滚动。当页面滚到到页面顶部的时候要及时关闭定时器。
Github地址