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

详细效果可以看本站右侧的回到顶部模块,。
好的,教程开始。
要做出这个效果我们要增加四处处东西:
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://demo.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://demo.txcstx.cn/zb_users/theme/tianxing/style/img/top.png
http://demo.txcstx.cn/zb_users/theme/tianxing/style/img/top1.png
ok,后台更新下缓存,前台就出现了这个还蛮漂亮的zblog回到顶部效果了,还有一个补充说明,如果你搞不懂什么叫“你正在使用的主题的xx文件夹”,那么请参考这篇文章: zblog主题怎么修改?zblogasp主题修改方法