Question

我刚刚创建了一个按钮来显示一个滚动到顶部的按钮，但它实际上不起作用。我仔细检查了一切似乎没问题。我也仔细检查了jQuery正在加载。怎么了？

HTML：

<div class="scroll-to-top-button js-scroll-to-top">
    <span>scroll to top</span>
</div>

SASS：

.scroll-to-top-button{
    width: 65px;
    height: 60px;
    background: $main-black;
    color: $main-white;
    border: 1px solid $main-black;
    text-transform: uppercase;
    position: fixed;
    bottom: -200px;
    right: 50px;
    z-index: 5;
    transition: all 0.2s ease;

    &:hover{
        background: $main-white;
        color: $main-black;
        border: 1px solid $main-black;
    }

    span{
        width: 80%;
        margin: 13px auto 0 auto;
        display: block;
        font-size: 12px;
        text-align: center;
        cursor: pointer;
    }
}

JS：

var jqWindow = $('window');
    var scrollTop = $('.js-scroll-to-top');

    function scrollToTopButtonDisplay(){
        if(jqWindow.scrollTop() > 100){
            scrollTop.animate({
                bottom: '0'
            }, 500);
        }
        else{
            scrollTop.animate({
                bottom: '-200px'
            }, 500);
        }
    }

    // scroll to top button
    jqWindow.on('scroll',function() {
        scrollToTopButtonDisplay();
    });

    scrollTop.on('click',function() {
        $('html, body').animate({
            scrollTop: 0
        }, 500, function() {
            scrollTop.animate({
                bottom: '-200px'
            }, 500);
        });
    });

Answer 1

查看http://jsfiddle.net/SVBVs/

已取消负面定位，不确定为什么要这样做！

除此之外你还没事......

scrollTop.on('click',function() {
    $('html, body').animate({
        scrollTop: 0
    }, 500);
});

滚动到顶部不显示.animate

1 个答案: