Question

我正在尝试使用简单的JS效果制作Skroll to Top按钮，但我被困在一个地方。当我点击按钮时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;

}

＆＃13;

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

＆＃13;

Answer 1

动画结束后你可以使用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()
        });
    })

});

Answer 2

您可以删除仅<a href="#">离开的<div class="page_up"></div>，或在$('.page_up').click()中返回false以解决此问题

＆＃13;

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

＆＃13;

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

＆＃13;

JS fadeIn / fadeOut显示麻烦

2 个答案: