页面上的go to top 按钮的实现

现在很多页面都有回到顶部的实现，但是处理的js脚本都很不一样，有的是插件大，有的是代码很多，下面列出两个还可以的。

一个是纯javascript，另一个是基于jquery的。

1.纯javascript脚本

<script type="text/javascript">/** * 回到页面顶部 * @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);}} </script>

参考http://www.nowamagic.net/javascript/js_BackToTop.php

2.基于jquery  【本人使用过】支持ie系列和ff，chrome

css部分 ：

 /*go to top*/#toTop{ width:18px;  text-align:center;  padding:5px;  position:fixed;  bottom:10px; right:5px; cursor:pointer; display:none;  font-family:verdana; font-size:11px;_float:right; _position: absolute; /*IE6 用absolute模拟fixed*/  _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); _background-attachment: fixed; /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/ } 

js部分：

$(function(){         //go to top         $('<div id="toTop"><img src="' + webroot + 'Skins/default/images/top.gif" /></div>').appendTo("body");        $(window).scroll(function() {  if ($(this).scrollTop() != 0) $('#toTop').fadeIn(); else $('#toTop').fadeOut(); });        $('#toTop').click(function() { $('body,html').animate({ scrollTop: 0 }, 700); });       }); 

参考 http://webdesignandsuch.com/10-jquery-back-to-top-link-solutions-for-websites/

 和 http://agyuku.net/2009/05/back-to-top-link-using-jquery/

这个也是基于jquery框架http://www.css88.com/demo/goToTop/的一个例子。