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

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

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

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

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://www.ishnan.com/demo/top-link.htm

本文JS代码转载自:

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

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

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

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

分享给朋友:

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

zblog插件开发文档

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

新交通警察手势信号视频

新交通警察手势信号视频

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

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

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

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

又一个十年

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

zblog出现

zblog出现"错误原因:数据库连接错误"的解决方法

前几天为准备网站上线在本地电脑上调试博客的时候,由于是换了台电脑来调试zblog博客程序的,程序是按照文件路径拷贝过去的,而且IIS下虚拟目录都没变,博客前台打开也都正常显示,但是有一点小细节地方出现了错误,那就是文章的浏览次数不显示了,很明显,这是数据库出了问题了,然后查看数据库以及c_custo...

发表评论

访客

看不清,换一张

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