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

男娘i 2022-06-18 06:18 26阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关 Mouse Out关键字——模拟鼠标离开页面上的一个元素的操作

Mouse Out关键字——模拟鼠标离开页面上的一个元素的操作；该关键字接收\[ locator \]一个参数，locator可以通过id或者name等进行定位； ==

ゝ一纸荒年。/ 2023年10月02日 08:24/ 0 赞/ 3 阅读

相关 innerHTML获取页面上的元素，包括获取元素的value值

前言我们可以通过innerHTML获取界面上的元素，但是有些元素，比如说：input中的value值我们却获取不到，但是在做OA时，有需求需要将自定义的表单转成HT

港控/mmm°/ 2023年07月10日 08:28/ 0 赞/ 123 阅读

相关如何用JS获取页面上的所有标签

　　最近忙的一匹，忙着大保健，都来不及写博客，今天特意抽出点时间来写一写　　前两天看到一个题，是问如何从页面上获取所有的标签的并查看他们的数量，感觉还是有点意思的，所以给大

╰半橙微兮°/ 2023年06月05日 05:50/ 0 赞/ 18 阅读

相关按钮关闭当前div_back to top按钮中用到的知识点

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth： scrollHeight: 获取对象的滚动高度。 sc

亦凉/ 2023年01月12日 10:27/ 0 赞/ 4 阅读

相关给ZENCART首页的 New Products加上add to cart按钮

给ZENCART首页的 New Products加上add to cart按钮給New Products模塊加按鈕打開文件includes\\modules\

旧城等待，/ 2022年10月01日 13:53/ 0 赞/ 3 阅读

相关 JavaScript如何获取当前页面上的指定对象.

JavaScript如何获取当前页面上的指定对象. 方法如下: document.getElementById(ID) //获得指定ID值的对象 docume

小灰灰/ 2022年08月25日 09:16/ 0 赞/ 171 阅读

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

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

男娘i/ 2022年06月18日 06:18/ 0 赞/ 27 阅读

相关 Go实战--实现简单的restful api(The way to go)

生命不止，继续 go go go !!! 介绍过net/http package： [http://blog.csdn.net/wangshubo1989/article

快来打我*/ 2022年06月16日 02:51/ 0 赞/ 173 阅读

相关页面上的图片太多？快试试懒加载！

` 今天在项目开发的过程中，调用后台提供的一个接口的时候，返回了93张图片，并且每张图片都是700700，真叫人头大！结果自然是打开页面的时候卡的比较严重。显

秒速五厘米/ 2022年06月11日 01:11/ 0 赞/ 41 阅读

相关 element-ui 分页组件添加确定按钮，实现点击按钮后翻页功能

分页组件 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

╰+攻爆jí腚メ/ 2021年07月25日 23:35/ 1 赞/ 1347 阅读