本文章总结了几种返回顶部的js/jquery实现代码，有需要的朋友可参考本文章。
纯js代码
| 代码如下 | 复制代码 |
/**
* 回到页面顶部
* @param acceleration 加速度
* @param time 时间间隔 (毫秒)
**/
function goTop(acceleration, time) {
acceleration = acceleration || 0.1;
time = time || 16;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;
// 滚动条到页面顶部的水平距离
var x = Math.max(x1, Math.max(x2, x3));
// 滚动条到页面顶部的垂直距离
var y = Math.max(y1, Math.max(y2, y3));
// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
// 如果距离不为零, 继续调用迭代本函数
if(x > 0 || y > 0) {
var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
window.setTimeout(invokeFunction, time);
}
} |
调用方法
返回到顶部调用方法很简单：
| 代码如下 | 复制代码 |
<a href="#" onclick="goTop();return false;">TOP</a> |
jquery实现代码
| 代码如下 | 复制代码 |
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var bt = $('#toolBackTop');
var sw = $(document.body)[0].clientWidth;
var limitsw = (sw - 840) / 2 - 80;
if (limitsw > 0){
limitsw = parseInt(limitsw);
bt.css("right",limitsw);
}
$(window).scroll(function() {
var st = $(window).scrollTop();
if(st > 30){
bt.show();
}else{
bt.hide();
}
});
})
</script> |
调用方法
| 代码如下 | 复制代码 |
<div style="display:none;" class="back-to" id="toolBackTop">
<a title="返回顶部" onclick="window.scrollTo(0,0);return false;" href="#top" class="back-top">
返回顶部</a>
</div> |
兼容IE6的代码
IE7及以上的浏览器版本，是完全可以兼容的，唯独IE6这个老不死的东西，就是这样子的折腾人，没办法，单独处理。
我目前用的JS代码就很简单，也是利用了Jquery的，外部加载Jquery就不用多说了。JS代码如下：
| 代码如下 | 复制代码 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
backTop=function (btnId){
var btn=document.getElementById(btnId);
var d=document.documentElement;
window.onscroll=set;
btn.onclick=function (){
btn.style.display="none";
window.onscroll=null;
this.timer=setInterval(function(){
d.scrollTop-=Math.ceil(d.scrollTop*0.1);
if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set);
},10);
};
function set(){btn.style.display=d.scrollTop?'block':"none"}
};
backTop('gotopbtn');
</script> |
HTML代码更是简单：
| 代码如下 | 复制代码 |
<div id="gotopbtn">返回顶部</div> |
其他就是CSS来渲染了，看CSS代码：
| 代码如下 | 复制代码 |
<style type="text/css">
#gotopbtn{width:20px;height:50px;line-height:999px;overflow:hidden;background:url(images/scrolltop.png) no-repeat 50% 0;position:fixed;_position:absolute;bottom:100px; left:50%; margin-left:440px;display:none;cursor:pointer}
</style>
<!--[if lt IE 6]>
<style type="text/css">
html{_text-overflow:ellipsis}
#gotopbtn{_position:absolute;_top:expression(eval(document.documentElement.scrollTop + 400))}
</style>
<![endif]--> |
总结
原理:不管是纯js的还是jquery实现的，我们会获取滚动条到页面顶部的距离, 然后上移一定的距离; 再获取滚动条到页面顶部的距离, 上移一定的距离 (比上一次小一点);
