JQuery返回顶部 代码 (wordpress)

开始折腾JQuery!——2010.5.1

以前在网页中使用JavaScript的时候,总感觉这种脚本代码,除了页面提示,貌似就没啥功能了,用了反而会让页面显得很乱。

去年知道JQuery,很好很强大的一个小型的JS库,不过一直没怎么研究过,为了能让自己的博客多一些JS效果,今天开始折腾JQuery。

在网上我看到主要流行两种 返回顶部 的JS代码,一种是使用JQuery实现(匀速滑动到顶部),一种是不使用JQuery实现(匀加速滑动到顶部)。

今天只记录如何使用JQuery来实现这个效果。

在主题header.php加一下代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scrollTop.js"></script>

在主题footer.php中保证有如下一段代码:

Top⇑

在主题文件夹下新建js文件夹在js文件夹下新建scrollTop.js文件,并添加如下代码:

$(function(){
    $('#returnTop').click(function(){
        $('html,body').animate({scrollTop: '100px'}, 800);
        return false;
    });
})()

返回博客首页刷新,点击 页脚 下的 top按钮,即可看到效果了。

PS:有关animate使用方法,请查阅 JQuery手册

这篇文章目前有9条评论。

  1. heroicYang CHINA Google Chrome Windows 2010-05-01 21:50

    五一都没有放松啊?呵呵。

    沙发王 !
  2. Shimu CHINA Mozilla Firefox Windows 2010-05-05 23:58

    木有看到动画哦- –

    板凳党 !
    • admin CHINA Internet Explorer Windows 2010-05-06 08:35

      还没加到这个博客上来, (谄笑)

  3. crusher AUSTRALIA Internet Explorer Windows 2010-05-06 08:58

    这个小效果用jQuery太不值了吧。好像这个功能只能不用JS也能实现的

    地板砖 !
    • admin CHINA Internet Explorer Windows 2010-05-06 12:35

      是有点不值,如果你的这款主题没打算使用JQuery框架的话。

  4. 小烂 AUSTRALIA Mozilla Firefox Ubuntu Linux 2010-05-06 12:02

    突然发现。。老乡。。? (汗)

    4 #
    • admin CHINA Internet Explorer Windows 2010-05-06 12:34

      如何发现滴?我怎么就没发现你嫩。

  5. 番茄 CHINA Google Chrome Windows 2011-03-14 23:40

    现在的WP博客3.1版本可以直接安装一个这样的插件就能实现这种返回顶部的功能了。

    5 #
  6. yesureadmin CHINA Google Chrome Windows 2011-12-21 13:59

    试了下,不均速滚动啊,JQ加载过了

    6 #
回复

(必填项)

(必填项)

(可选)