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

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

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

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

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返回顶部按钮-滑动效果的返回顶部锚点按钮” 的相关文章

zblog插件开发文档

 插件开发文档1.说明插件采用系统提供的各种接口,用来实现一些高级定制功能,让Z-Blog变的更加强壮和有趣(Very Good,Very Strong.)。2.目录及命名要求插件是放在系统的Plugin目录下的,插件必须有自己的目录名且不与其它插件同名。插件目录名即是...

2010最全的贱语大全(247句)

2010最全的贱语大全(247句)

1.别和我谈恋爱,虚伪。有本事咱俩结婚。2.你情敌和曾经背叛你的人同时掉入河中,并且他们不会游泳,你是选择蹦迪还是去KTV?3.love your mother who who……4.别做点错事就把什么脏水都往自己身上泼,姐还要留着冲厕所呢。5.新闻联播的牛X之处在于就算...

又一个十年

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

自定义Mime类型

自定义Mime类型

经常会遇到明明FTP路径上是有某个文档,但是访问路径时却没有那个文档,这里是Mime类型设置的问题原因是很多虚拟主机上是禁止主机使用下载如扩展名为:ZIP/RAR/,MP3/FLV等之类文件,怕占有主机的物理流量,其实想实现并不难,使用主机管理后台中的"自定义Mime类型",就可...

CM7将会正式支持xperia系列手机

CM7将会正式支持xperia系列手机

 简而言之,首先,索尼爱立信官方打算支持freexperia小组的发开,为他们提供技术支持,尤其是帮助他们解决一直未能解决的相机问题。其次,CM小组官方宣布将会在支持的产品列表里加入xperia系列(这离不开第一条的实现),而且freexperia小组也会成为CM小组的一部分。这下要给力了...

拍卖时间的女孩

拍卖时间的女孩

 这是今年他第三次见到叶春笙,上次见她,她穿着棉质的手绘T恤,素色的亚麻长裙,发间别着一朵鸡蛋花,仙森气十足。今天她一身闪耀的礼服,华丽得让他不自觉想起《了不起的盖茨比》里的黛西,那个拜金女人。而叶春笙看起来就是个拜金女孩,她用冰块捂着被打肿的脸颊,应当很疼,眉都皱起,神色却很平静,虽然在...

发表评论

访客

看不清,换一张

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