JQuery返回顶部 代码 (wordpress)

开始折腾JQuery!——2010.5.1

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

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

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

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

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



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

<a href=”#” id=”returnTop”>Top&uArr;</a>

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

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

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

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

这篇文章目前有9条评论

  1. heroicYang 2010-05-01 21:50

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

    沙发王 !
  2. Shimu 2010-05-05 23:58

    木有看到动画哦- –

    板凳党 !
    • admin 2010-05-06 08:35

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

  3. crusher 2010-05-06 08:58

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

    地板砖 !
    • admin 2010-05-06 12:35

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

  4. 小烂 2010-05-06 12:02

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

    4 #
    • admin 2010-05-06 12:34

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

  5. 番茄 2011-03-14 23:40

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

    5 #
  6. yesureadmin 2011-12-21 13:59

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

    6 #
Leave a Reply

(必填项)

(必填项)

(可选)