JS fadeIn/fadeOut显示故障

Question

我正试图使滑雪到顶部按钮与简单的JS效果，但我被困在一个地方。当我点击按钮它fades Out (但它不应该)，然后滚动到顶部，我的按钮fades In和即时fades Out。

我想得到这样的效果:我点击按钮，页面滚动到顶部，按钮fades Out。

这是我的代码，我找不到哪里是错误。

$(function() {

            $(window).scroll(function() {

                if($(this).scrollTop() != 0) {

                    $('.page_up').fadeIn();

                } else {

                    $('.page_up').fadeOut();

                }

            });

            $('.page_up').click(function() {

                $('body,html').animate({scrollTop:0},800);

            });

        });



.page_up{
    display: none;
    background-image: url("images/1c.png");
    height: 52px;
    width: 52px;
    position: fixed;
    left: 30px;
    bottom: 30px;

}

​

<a href="#"><div class="page_up"></div></a>

​

Answer 1

您可以删除锚点<a href="#">，让<div class="page_up"></div>单独使用，或者在$('.page_up').click()中返回false以修复此问题。

​

$(function() {
  $(window).scroll(function() {
    if($(this).scrollTop() > 0) {
      $('.page_up').fadeIn();
    } else {
      $('.page_up').fadeOut();
    }
  });

  $('.page_up').click(function() {
    $('body,html').animate({scrollTop:0},800);
    return false;
  });
});

<a href="#"><div class="page_up"></div></a>

​

Answer 2

动画结束后可以使用fadeOut：

$(document).ready(function () {
    $(window).scroll(function () {

        if ($(this).scrollTop() != 0) {
            $('.page_up').fadeIn();
        }

    });

    $(".page_up").on('click', function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800, function () {
            $(".page_up").fadeOut()
        });
    })

});