Zblog回顶部、首页和评论滚动效果-网站建设-菜鸟之家

首页网站建设正文

Zblog回顶部、首页和评论滚动效果

2012-05-01 459

今天在逛博客的时候发现了这个功能，感觉蛮好的，特别是当文章的评论比较多的时候，可以很方便的让你回到文章顶部、评论文章、回到首页。提高了博客的互动性与易用性。加上去后，感觉真好，呵呵，很方便、很实用。现在我把它分享出来，希望能够帮助大家。

第一步：将下边的代码，保存下来，保存为一个JS文件，名字可以自己想，我用的是fudong.js。

lastScrollY=0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("full").style.top=parseInt(document.getElementById("full").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
/*if(diffY == 0){document.getElementById("full").style.display = "none"}
else{document.getElementById("full").style.display = "block"}
}*/
if(diffY > 450){document.getElementById("full").style.display = "block"}
else{
document.getElementById("full").style.display = "none"}
}

suspendcode="<div id=\"full\" style='display:none; width:15px; height:57px; POSITION:absolute; left:50%; top:420px; margin-left:463px; z-index:100; text-align:center;'><a href='#'><img src='../THEMES/j-spring/style/images/btn_top.gif' border=0 /></a><br><a href='http://www.08zx.com'><img src='../THEMES/j-spring/style/images/shouye.gif' border=0 /></a><br><a href='#comment'><img src='../THEMES/j-spring/style/images/btn_comment.gif' border=0 /></a></div>"
document.write(suspendcode);
window.setInterval("heartBeat()",1);



第二步：将这个JS文件上传到你博客主题包下的SCRIPT目录下；即/THEMES/主题名称/SCRIPT/下边。

第三步：将所需的两张图片btn_top.gif、btn_comment.gif，shouye.gif,上传到你博客所用主题包下边的/style/images/目录下；

第四步：进入后台，编辑修改主题包下文件“./THEMES/主题包ID/TEMPLATE/single.html”，在“<head></head>”区，插入JS调用代码：

<script type="text/javascript" src="<#ZC_BLOG_HOST#>THEMES/<#ZC_BLOG_THEME#>/SCRIPT/fudong.js"></script>

第五步：提交保存后，后台文件重建即可。

以上效果实现用到的小图标下载：201205121117480217.rar

标签：
设计
运营

发表评论：取消回复

上一篇>>详解301永久重定向实现方法

=========================================

下一篇>>Z-blog文章图片在新窗口中全屏显示的方法