JS fadeIn/fadeOut display проблема

Question

Я пытаюсь сделать кнопку Skroll to Top с помощью простых эффектов 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(), чтобы исправить эту

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

});