返回顶部功能之完美篇

Posted on | Edited on | In |

此文木木童鞋早已写过，但是还是再啰嗦的整理一遍。 直接切入正题：

首先加载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文件夹里）

所有步骤都完成了，效果出来了吧，嘿嘿，木木的东西就是经典啊，原文地址 “返回顶部”加强版代码及释义 为什么是完美篇，因为比木木的完善，素材都提供给你了，真的是很傻瓜化了。