现在的位置: 首页 > Wordpress > WP技巧 > 正文
WordPress利用jQuery实现向上向下滑动
2011年01月04日 WP技巧 ⁄ 共 2352字 评论数 35 ⁄ 被围观 9,070+

如你所见,好久没有来折腾Wordpress了,不是懒得折腾,而是实在折腾不起。因自己对技术的匮乏免不了抄袭别人的成果,所以有的时候不好意思拿出来。不过为了以后还能记起,还是在此做个备忘。

这次折腾的目标已然实现,就是在博客右侧添加一个向上向下的滑动按钮,向上是快速回到顶部,向下是快速回到底部,中间是快速滑到评论框。方法来自Yesure技术博客,但据说又是来自园子博客,总之分享无处不在。

实现过程:

1、下载图片文件,可将我的直接右击另存为即可或者自己制作一张合适的图片,上传至主题图片文件夹,例如 img 文件夹。

2、在主题文件 footer.php 中添加如下代码(在 body 标签结束前):

<div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>

3、在主题文件 style.css 中加以下样式:

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

其中的margin-left:188px;要根据自己的实际情况酌情增减,以停留在最合适的位置。

4、使用 jQuery 实现滑动效果:

jQuery(document).ready(function($){
var s= $('#shangxia').offset().top;$(window).scroll(function (){$("#shangxia").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});});
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
$('#shang').click(function(){$body.animate({scrollTop: '0px'}, 400);});
$('#xia').click(function(){$body.animate({scrollTop:$('#footer').offset().top}, 800);});
$('#comt').click(function(){$body.animate({scrollTop:$('#comments').offset().top}, 800);});
});

如果不知jQuery如何加载,可以参考早前的文章:利用jQuery实现侧边栏Tab切换效果

5、加载js文件即可。

将上述代码保存为 xx.js文件加载即可。

<script src="http://www.yourdomain.com/xx.js" type="text/javascript"></script>

------------------------------我不是分割线------------------------------------------

注:如果在此之前你的主题已经加载过 js 文件,比如把所有的 js 文件已经集中在一个 all.js 文件中,那么只需在开头或者结尾直接添加如下代码即可:

$(function(){
var s= $('#shangxia').offset().top;$(window).scroll(function (){$("#shangxia").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});});
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
$('#shang').click(function(){$body.animate({scrollTop: '0px'}, 400);});
$('#xia').click(function(){$body.animate({scrollTop:$('#footer').offset().top}, 800);});
$('#comt').click(function(){$body.animate({scrollTop:$('#commentform').offset().top}, 800);});
});

其中的#commentform可改成comments,根据自己的实际情况多试试。



目前有 35 条留言 其中:访客:34 条, 博主:0 条

  1. 软件志 : 2011年07月02日08:19:09  21楼

    我试了下 我不能上、评论都可以 就是不能下啊

  2. 左边博客 : 2011年09月23日08:39:38  22楼

    使用z-blog,暂时用不上这个,收藏了!

  3. Jonee : 2012年07月11日14:35:16  23楼

    你的向下按钮点了居然是向上的= =


    • 管理员
      admin : 2012年07月11日14:55:16  地下1层

      你觉得可能吗?再试试吧

  4. Jonee : 2012年07月11日15:29:23  24楼

    怪了,刚刚试的时候还是这样。。我也不知道了,呵呵
    你这个向上向下的图标可以共享一下么?


    • 管理员
      admin : 2012年07月11日19:46:46  地下1层

      可能和网站加载有关 就像我去你网站时 开始发现 写评论 无效 等完全加载好了 就有效了

  5. Jonee : 2012年07月11日16:05:22  25楼

    我找了,还是谢谢


    • 管理员
      admin : 2012年07月11日19:45:44  地下1层

      呵呵 这个是主题里的 找了也不太好用吧 是两个图标一起的 需要点css功底了 我是不会。。。

      • Jonee : 2012年07月11日21:19:39  地下2层

        你这个我的确不会用,需要弄鼠标移动的效果,我自己找了一个不错的,呵呵

  6. feetel : 2012年07月22日13:32:56  26楼

    谢谢,我需要这个呢


    • 管理员
      admin : 2012年07月22日17:54:43  地下1层

      不客气 多多支持

  7. hoythan : 2013年01月26日22:36:40  27楼

    不知可否分享您的侧边“不离不弃”广告滑动的方式?


    • 管理员
      ifenwen : 2013年02月03日11:14:42  地下1层

      当然 拿去便是

      • hoythan : 2013年02月03日13:08:08  地下2层

        您误会了…我是希望您能够分享一下这个方式?


如果觉得文章或者网站对您有帮助请点击 向TA付款 捐赠作者或者点击下面的分享按钮支持作者

更多

给我留言

留言无头像?

无觅相关文章插件,快速提升流量

×