组合setTimeout和clearTimeout，实现“返回顶部”的功能

结合setTimeout和clearTimeout，实现“返回顶部”的功能

结合setTimeout和clearTimeout，当页面停止滚动时，“返回顶部”按钮淡隐淡出。点击“返回顶部”页面以动画形式返回顶部。完美兼容ie6-11，firefox，chrome等。

html代码如下：

<a href="javascript:void(0)" id="backToTop" class="backToTop">ToTop</a>

css代码如下：

html {_background: url(about: blank);}/* 解决在ie6下颤抖的问题 */
.backToTop {width: 80px; height: 80px; line-height: 80px; display: none; background: #d1d1d1; position: fixed; bottom: 20px; top: auto; right: 20px; z-index: 1200; text-align: center; cursor: pointer;}
*html .backToTop {position: absolute; bottom: auto; top: expression(eval(document.documentElement.clientHeight + document.documentElement.scrollTop - this.offsetHeight - 20))}
.backToTop:hover {background: #ccc; text-decoration: none;}

js代码如下：

backToTop($('#backToTop'));
function backToTop(dom) {
    var $backToTop = dom;
    var start = null, backT = null;
    backT = function() {
        clearTimeout(start);
        start = setTimeout(function() { //结合setTimeout和clearTimeout，当页面停止滚动时，返回顶部按钮淡隐淡出
            if($(window).scrollTop() > 300) {
                $backToTop.fadeIn(400);
            } else {
                $backToTop.fadeOut(400);
            }
        }, 400);
    }
    backT();
    $(window).scroll(function() {
        backT();
    });
    $(window).resize(function() {
        backT();
    });
    $backToTop.on("click", function() {
        $("html, body").animate({
            scrollTop: "0px"
        }, 200);
        $backToTop.fadeOut(400);
        return false;
    });
}

组合setTimeout和clearTimeout，实现“返回顶部”的功能

相关推荐