WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果（样式二）
WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果（样式二）
之前发表过一种样式的“返回顶部、返回底部、评论”效果，今天在这里分享Devework.com目前使用的效果：一个博客侧边滑动，返回顶部，查看评论的小工具，作为WordPress等博客专用。说到这个小工具，可是小有来头啊，据说（强调是“据说”）这原来是一位WordPress高手林木木首创的（人家称之为“滑动导航”），然后被某人改进做成了WordPress 插件，并且成功提交到WordPress官方去了。所以说不是自己的一定要说明来源，不然...；最后说一句，这个挺像插件wp-auto-top，姑且当做是wp-auto-top插件代码化吧~
以下的代码如果没有错的应该来源于林木木，图片来源于wp-auto-top插件，感谢原作者。为防止JS冲突，本人稍作了修改。
教程如下：
一、确保你的主题已经加载jQ库，然后将以下js代码以gototop.js文件保存，放在主题的目录下：
jQuery(document).ready(function($) { $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body"); $("#shang").mouseover(function() { up() }).mouseout(function() { clearTimeout(fq) }).click(function() { $body.animate({ scrollTop: 0 }, 400) }); $("#xia").mouseover(function() { dn() }).mouseout(function() { clearTimeout(fq) }).click(function() { $body.animate({ scrollTop: $(document).height() }, 400) }); $("#comt").click(function() { $body.animate({ scrollTop: $("#comments").offset().top }, 400) }); }); function up() { $wd = $(window); $wd.scrollTop($wd.scrollTop() - 1); fq = setTimeout("up()", 50) }; function dn() { $wd = $(window); $wd.scrollTop($wd.scrollTop() + 1); fq = setTimeout("dn()", 50) }; |
|---|
二、打开主题的footer.php，在.....前加入以下代码：
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/gototop.js"></script> <div id="shangxia"> <div id="shang" title="↑ 返回顶部"></div> <?php if ( is_singular() ){ ?> <div id="comt" title="查看评论"></div> <?php } ?> <div id="xia" title="↓ 移至底部"></div> </div> |
|---|
/js/gototop.js需要改为与你的实际路径。
三、将以下css代码丢入主题的style.css中：
#shangxia{position:fixed;top:45%;right:50%;display:block;margin-right:-540px;z-index:999;} #shang,#comt,#xia{background:url(gototop.png) no-repeat;position:relative;cursor:pointer; height:25px;width:29px;margin:10px 0 0;} #comt{background-position:left -30px;height:32px;} #xia{background-position:left -68px;} #comt:hover{background-position:right -30px;} #shang:hover{background-position:right 0;} #xia:hover{background-position:right -68px ;} |
|---|
上面的css相关代码有些需要修改的，如果没有css基础那就帮不了你了。图片gototop.png有以下参考(下载地址在这里):
找一张你喜欢的重名为gototop，放到主题目录下的images文件夹（应该都有这个文件夹吧？）即可。
如果发现查看评论的按钮失效，原因可能是你的主题的评论的div的ID不是“comments”，需要修改js代码。
如果不能实现像本站Devework.com的滑动效果的话应该是js冲突了，自己折腾吧~