天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制 | RSS订阅 | 网站地图 | 联系我们
天兴工作室自用主题2015版上架销售
当前位置:网站首页 教程 正文

zblog添加“回到顶部”滑动图标教程

天兴工作室 2年前 (2014-06-01) 教程 4269 ℃ 11 评论
内容加载中......

先上这个教程要做的事情最终出来的结果,截图如下:


详细效果可以看本站右侧的回到顶部模块,。


好的,教程开始。


要做出这个效果我们要增加四处处东西:

js部分:新建一个top.js文件,复制以下代码粘贴并保存,上传至你正在使用的主题中的“script”文件夹内。

function b(){
    h = $(window).height();
    t = $(document).scrollTop();
    if(t > h){
        $('#gotop').show();
    }else{
        $('#gotop').hide();
    }
}
$(document).ready(function(e) {
    b();
    $('#gotop').click(function(){
        $(document).scrollTop(0);    
    })
});

$(window).scroll(function(e){
    b();        
})

html部分:将以下代码复制粘贴到你正在使用的主题的TEMPLATE文件夹内的“footer.html”(zblogphp是footer.php)文件内,放在</body>之前就行,注意要把QQ和留言本链接改成你自己的。

<script language="javascript" type="text/javascript" src="<#ZC_BLOG_HOST#>zb_users/theme/<#ZC_BLOG_THEME#>/script/top.js"></script>
<div id="tbox">
    <a id="gotop" href="javascript:void(0)"></a>
    <a id="pinglun" href="http://wpa.qq.com/msgrd?v=3&uin=1109856918&site=qq&menu=yes" target="_blank" title="通过QQ联系我们"  rel="nofollow"></a>
    <a id="xiangguan"  href="http://www.txcstx.cn/guestbook.html"  target="_blank" title="如果您有任何意见,欢迎反馈给我们!" ></a>
</div>

css部分:复制以下css代码至你正在使用主题的css文件里面,随便放在哪个位置都行。css代码如下:

/*---返回顶部--*/
*{padding:0px; margin:0px;}
*html{background-image:url(about:blank);background-attachment:fixed;}
#tbox{position:fixed;left:50%;bottom:50px;margin-left:500px;width:50px;height:150px
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));_margin-bottom:15px;right: 90px;}
#pinglun,#xiangguan,#gotop{width:50px;height:50px;display:block;background-image: url(img/top.png);background-repeat: no-repeat;margin-bottom: 5px;}
#pinglun:hover,#xiangguan:hover,#gotop:hover{width:50px;height:50px;display:block;background-image: url(img/top1.png);background-repeat: no-repeat;}
#pinglun{background-position:0 0;}
#xiangguan{background-position:0 -55px;}
#gotop{background-position:0 -110px;}

图片部分:下载下面的两张图片放在你正在使用的主题的图片文件夹内。

http://www.txcstx.cn/zb_users/theme/tianxing/style/img/top.png

http://www.txcstx.cn/zb_users/theme/tianxing/style/img/top1.png

ok,后台更新下缓存,前台就出现了这个还蛮漂亮的zblog回到顶部效果了,还有一个补充说明,如果你搞不懂什么叫“你正在使用的主题的xx文件夹”,那么请参考这篇文章:    zblog主题怎么修改?zblogasp主题修改方法

我要提问 如果你对于此文还有任何疑问欢迎在文章下面的评论区域留言,如果你的疑问比较多,欢迎在本站的在线提问专业去发布问题,点击右侧的我要提问即可到达。天兴工作室将尽我所能为你解答问题。

本文标签zblog教程 zblog回到顶部

本文地址http://www.txcstx.cn/post/632.html

版权说明:如非注明,本站文章均为 天兴工作室 原创,转载请注明出处和附带本文链接。

哈哈,本文已有 11 位小伙伴发表了看法:

1#耀宝洪博客 (游客)  评论于 2015-10-28 15:07:45回应ta
试一下看看能不能实现,ZBlog后台的返回顶部插件用着效果不好,空白的一个定西没有字。
2#天兴工作室网友 (游客)  评论于 2015-10-26 14:13:16回应ta
改什么
3#feimayi (游客)  评论于 2014-10-30 15:22:45回应ta
出是出来了 但图片不显示 白色的 不知道为什么?
3#天兴工作室 (管理员)  评论于 2014-10-30 15:25:49回应ta
缓存 我这边打开你的网站看已经正常了
4#小鱼 (游客)  评论于 2014-10-05 07:14:51回应ta
我也没有返回顶部。。。
5#小鱼 (游客)  评论于 2014-10-05 06:42:10回应ta
貌似其他页面有 但首页不显示
6#ray (游客)  评论于 2014-06-18 20:40:13回应ta
蓝色简洁第六版。我试试看
7#ray (游客)  评论于 2014-06-18 16:00:36回应ta
这个好像不适用PHP版本吧,我按照方法做了以后回到顶部的效果失效,QQ和留言板正常
7#天兴 (游客)  评论于 2014-06-18 17:27:28回应ta
不论什么版本都行
7#ray (游客)  评论于 2014-06-18 18:02:11回应ta
可是我这不行啊,不知道是哪里出问题了。只有QQ和留言是正常的。回到顶部不行
7#天兴 (游客)  评论于 2014-06-18 19:20:32回应ta
你用的什么模板,不行吧返回顶部的链接改成,top是你模板内最顶部的div属性,可以自己改下

欢迎 发表评论

必填

选填

选填

必填

◎欢迎在这里交流反馈,垃圾评论会秒删的额...

联系我们
最新评论
标签云
zblogasp版ytcms市话王黑白简洁主题zblogasp模板再见2015刷机超级201zblog不同模板天兴博客zblogphp404添加网站统计武汉欢乐谷电信运营商zblog文章数蓝色模板Word发文章404页面长途9分卡分类管理刘冬emlog带链接wordpressemlog6介绍会员注册zblogphp图片站emlog首页模板文件喜迎千万WLAN预付费卡zbp免费模板乡镇V网无限下拉波导T9天翼易通卡点对点彩信流量叠加包
热门模板