此文木木童鞋早已写过，但是还是再啰嗦的整理一遍。 直接切入正题：
首先加载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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
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
},
400)
});
$('#comt').click(function() {
$body.animate({
scrollTop: $('#comments').offset().top
},
400)
});
});
|
然后在头部加载huadong.js文件：
1
| <script type="text/javascript" src="http://blueandhack.com/wp-content/themes/white-love/js/huadong.js"></script>
|
在头部写下如下代码：
1
2
3
4
5
6
7
8
9
10
|
<?php if (is_home()) { ?>
<div id="shangxia"><div id="shang"></div><div id="xia"></div></div>
<?php } else { ?>
<div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>
<?php } ?>
|
CSS代码，添加到主题的style.css里：
1
2
3
4
5
6
7
8
|
# shangxia{position:absolute;top:40%;left:50%;margin-left:-520px;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;}
|
要用到的图片（记得要放到主题里的images文件夹里）
所有步骤都完成了，效果出来了吧，嘿嘿，木木的东西就是经典啊，原文地址 “返回顶部”加强版代码及释义 为什么是完美篇，因为比木木的完善，素材都提供给你了，真的是很傻瓜化了。