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条评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注