孔维聪

返回顶部功能之完美篇

作者：亲亲亲孔维聪 发布时间：December 9, 2011 分类：前端开发

首先加载jquery（如果你的博客已经加载了，就不要重复加载jquery了）

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)
    });
});

在头部写下如下代码：

CSS代码，添加到主题的style.css里：

#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;}

所有步骤都完成了，效果出来了吧

标签: JQuery, 返回顶部