jQuery返回顶部的js实现

2011-12-10 1,217 1

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

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

相关文章

JavaScript 点击按钮一键复制指定文本内容
给div来个酷炫的四角边框—linear-gradient
充分理解bootstrap的栅格系统
CSS 居中大全
神奇的css table隔行换色
准备准备 学习开撸响应式的页面

评论(1)

发布评论

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