返回顶部

最新推荐文章于 2025-12-03 11:16:56 发布

转载最新推荐文章于 2025-12-03 11:16:56 发布 · 305 阅读

文章标签：

#jquery #function #mootools #javascript #scroll #filter

jQuery下的返回顶部功能

您可以狠狠地点击这里：jQuery下的返回顶部demo

可以看到，如果页面有滚动高度，右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条，如下图所示：
demo页面效果截图张鑫旭-鑫空间-鑫生活

点击这里“返回顶部”字样的按钮后，页面就像是抹了润滑剂一样，倏地一声就滑到顶部了，同时，该点击按钮也玩起了躲猫猫 – 不见了。

实现的原理嘛，恩……估计鲜有人关心，所以我也懒得浪费口水了，直接上代码。

无论是这里的jQuery实现还是MooTools实现，下面的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文件中，页面就有效果啦！对了，请使用jQuery 1.4+。