切换到宽版
发帖 回复
返回列表
  • 946阅读
  • 5回复

【主题美化&增强系列】“返回顶部”强化版 [复制链接]

 上一主题 下一主题
blueandhack
WordPress侠客
 
只看楼主 倒序阅读 使用道具 0楼 发表于: 2010-10-03
— 本帖被 ralix 设置为精华(2010-10-03) —
“返回顶部”所要的实现的功能是我的博客左侧的那个返回顶部，移动到最下，以及到达评论区的功能

效果图
  


首先加载jquery（如果你的博客已经加载了，就不要重复加载jquery了）
复制代码
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


然后新建一个huadong.js
里面写入如下内容：

复制代码
  1. jQuery(document).ready(function($) {
  2. var s = $('#shangxia').offset().top;
  3.     $(window).scroll(function() {
  4.         $("#shangxia").animate({
  5.             top: $(window).scrollTop() + s + "px"
  6.         },
  7.         {
  8.             queue: false,
  9.             duration: 500
  10.         })
  11.     });
  12.     $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
  13.     $('#shang').click(function() {
  14.         $body.animate({
  15.             scrollTop: '0px'
  16.         },
  17.         400)
  18.     });
  19.     $('#xia').click(function() {
  20.         $body.animate({
  21.             scrollTop: $('#footer').offset().top
  22.         },
  23.         400)
  24.     });
  25.     $('#comt').click(function() {
  26.         $body.animate({
  27.             scrollTop: $('#comments').offset().top
  28.         },
  29.         400)
  30.     });
  31. });



然后加载huadong.js：
复制代码
  1. <script type="text/javascript" src="http://blueandhack.com/wp-content/themes/white-love/js/huadong.js"></script>

在文章头部写入如下代码：
复制代码
  1. <?php if (is_home()) { ?>
  2. <div id="shangxia"><div id="shang"></div><div id="xia"></div></div>
  3. <?php } else { ?>
  4. <div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>
  5. <?php } ?>

CSS代码如下：

复制代码
  1. #shangxia{position:absolute;top:40%;left:50%;margin-left:-520px;display:block;}
  2. #shang{background:url(images/huadong.gif) no-repeat;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
  3. #comt{background:url(images/huadong.gif) no-repeat center -45px;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
  4. #xia{background:url(images/huadong.gif) no-repeat center -78px;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}


索要用到的素材（记得传到主题文件夹的images文件夹里）


此教程整理来自木木博客


今后我会多多给大家整理教程，给大家共享的
都是有关WORDPRESS主题美化&增强的


[ 此帖被blueandhack在2010-10-03 02:06重新编辑 ]
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
justsoshow
WordPress新手
只看该作者 1楼 发表于: 2010-10-03
支持一下，做个沙发
回复
举报
jinriit
VIP高级会员
只看该作者 2楼 发表于: 2010-10-03
回 楼主(blueandhack) 的帖子
关于这个特效我也关注了很多 我挺想弄一些简单的特效  发个效果图啊


但是观察杀软对网页报毒  大部分都是由于JS 造成的   所以想找个安全的。
[ 此帖被jinriit在2010-10-03 01:04重新编辑 ]
回复
举报
blueandhack
WordPress侠客
只看该作者 3楼 发表于: 2010-10-03
回 2楼(jinriit) 的帖子
效果图已经添加
回复
举报
ralix
WordPress总管
只看该作者 4楼 发表于: 2010-10-03
写的很不错，已加精华！


Wordpress  Wordpress论坛  Wordpress插件  Wordpress主题
回复
举报
joy001
WordPress新手
只看该作者 5楼 发表于: 2010-10-03
谢谢版主的分享了
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个