jQuery返回顶部的js实现

最近重新设计囧客圈的时候遇到的. 这个效果不错 仿新浪微博,带缓冲的平滑滚动: Css: .backToTop…


最近重新设计囧客圈的时候遇到的.
这个效果不错 仿新浪微博,带缓冲的平滑滚动:

Css:

.backToTop {
    display: none;
    width: 18px;
    line-height: 1.2;
    padding: 5px 0;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    text-align: center;
    position: fixed;
    _position: absolute;
    right: 10px;
    bottom: 100px;
    _bottom: "auto";
    cursor: pointer;
    opacity: .6;
    filter: Alpha(opacity=60);
}

Js:

(function() {
    var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
        .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
            $("html, body").animate({ scrollTop: 0 }, 120);
    }), $backToTopFun = function() {
        var st = $(document).scrollTop(), winh = $(window).height();
        (st > 0)? $backToTopEle.show(): $backToTopEle.hide();
        //IE6下的定位
        if (!window.XMLHttpRequest) {
            $backToTopEle.css("top", st + winh - 166);
        }
    };
    $(window).bind("scroll", $backToTopFun);
    $(function() { $backToTopFun(); });
})();

《“jQuery返回顶部的js实现”》 有 1 条评论

  1. 这段时间开始坚持每天一更,看多好多以前收藏的博客都没有更新了,还是比较可惜的,希望大家都能继续坚持下去。

发表回复

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

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

More posts. You may also be interested in.