javascript返回顶部几种代码总结
纯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]-->