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

最新推荐文章于 2024-04-08 13:03:22 发布

原创最新推荐文章于 2024-04-08 13:03:22 发布 · 3.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#go #jquery #javascript #function #脚本 #ie

javascript 同时被 2 个专栏收录

56 篇文章

订阅专栏

jquery

8 篇文章

订阅专栏

本文介绍了两种实现网页回到顶部功能的方法，一种是基于纯javascript，另一种是利用jquery框架。这两种方法都适用于不同浏览器，包括IE系列和主流浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在很多页面都有回到顶部的实现，但是处理的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/的一个例子。