当前位置：首页 > 牛文 > 正文内容

zblog返回顶部按钮-滑动效果的返回顶部锚点按钮

admin15年前 (2010-11-20)牛文1985

本文适合新手借鉴，类比学习

zblog实现网页从底部滚动返回顶部

在head区加入JS链接

<SCRIPT language="javascript" src="<#ZC_BLOG_HOST#>themes/<#ZC_BLOG_THEME#>/SCRIPT/top.js" type="text/javascript"></SCRIPT>

将下面的JS复制粘贴到记事本保存命名为top.js，上传路径为相对应的JS路径，JS代码放到想要实现滚动效果的页面

JS 代码：

/**
* 作者：我是UED ，http://www.iamued.com/qianduan/816.html
* 回到页面顶部
* @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);
        }
}

在网页的合适部分加TOP链接

这是最原始的做法了，如果滚动太快，那就是我们给用户用脚本实现一下缓冲效果，而不是直接飙到顶部。

按钮代码：<a id="gototop" href="javascript:void(0);" onclick="goTop();return false;">Top of Page</a>

演示：https://ishnan.com/demo/top-link.htm

本文JS代码转载自：

http://hi.baidu.com/cal1314/blog/item/8640d6b48ceeb9638bd4b22b.html