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

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

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

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

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

扫描二维码推送至手机访问。

版权声明:本文由水墨优化网发布,如需转载请注明出处。

本文链接:https://ishnan.com/post/74.html

分享给朋友:

“zblog返回顶部按钮-滑动效果的返回顶部锚点按钮” 的相关文章

如果你已经20岁了,你真的输不起了,别再孩子了...

如果你已经20岁了,你真的输不起了,别再孩子了...

如果你到了20岁,还没到25岁 。                  ——李开复 这篇...

新交通警察手势信号视频

新交通警察手势信号视频

    从10月1日起,新的交通警察手势信号将在全国施行。新的交通警察手势信号增强了指挥的实用性,提高了交通警察的指挥效能,有利于保障道路交通的安全畅通,有利于树立交通警察良好的执勤执法形象。    新的交通警察手势信号,由原来的11种减少...

当我用短信通知别人我换手机号后……

前一段时间,因为资费的原因,换了一次手机号码,然后就得通知别人啊(省得添麻烦),然后我就发短信了,写的比较臭美:大家好!!我是人见人爱、花见花开的嘟嘟,从2006年1月*日下午2:15起,我的手机号码正式更换为135********,麻烦记录,谢谢合作!!收到消息请回复!!群发出去后,开始陆续收到不...

黄昏偶拾

黄昏偶拾

 黄昏弥漫着朦胧等待月儿入梦在湖边 拣起石子打出一串水漂不是为了无聊而是因为感动 只有水 才能总是让我们情不自禁地低头当我们低下头来便有一种清纯和丰沛的感觉悄悄 注入心中...

又一个十年

薛法根1988年,我踏上工作岗位;1998年,我刚到而立之年,就幸运地成为当时江苏省最年轻的小学语文特级教师;1999年,幸运之星又一次降临,我成为江苏省最年轻的名教师。但我深知,从教仅仅10年的努力远未达到“名特”教师的水准,更多的是一种机遇的垂青而已。要让这两顶桂冠名至实...

屏蔽主机屋广告

屏蔽主机屋广告

怎么能屏蔽主机屋的这个广告代码呢?其实简单的很,只是加上一个代码就可以了!,网站上传到空间以后。空间会自动在最后面加一上段代码的,只要我们在网页的最下面加上一个符号,就可以实现主机屋免费空间去广告的了,代码如下:<!--就这个东西,如果你的网站是静态页面的话,直接复制,黏贴到你网站<ht...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。