스크롤 할 때 버튼을 숨기고 스크롤이 멈출 때 표시하는 방법은 무엇입니까?

Question

은 내가 스크롤을 중지 할 경우에만 다시 표시, 표시되지 않습니다 스크롤 버튼으로 https://www.k-kosho.co.jp/

아래 페이지와 같은 상단 버튼에 돌아 가기를 만들고 싶어.

이것은 내 시작 js, 모두가 도움이되기를 바랍니다.

$(window).scroll(function() { 
     if ($(this).scrollTop() != 0) { 
     $('.ev-scrolltop').fadeIn(); 
     } else { 
     $('.ev-scrolltop').fadeOut(); 
     } 
    }); 

모두에게 감사드립니다!

Answer 1

문제점을 성공적으로 해결했습니다.

CSS :

.ev-scrolltop{ 
    opicity: 0; 
} 

.ev-scrolltop.show{ 
opicity: 1; 
transition: opacity .4s ease-out; 
} 

JS :

$(document).ready(function() { 
     var t, n = $(window), 
          e = $(".ev-scrolltop"), 
          o = !1, 
          i = function() { 
           if (n.scrollTop() < n.height()) return e.removeClass("show"), !1; 
           t && (clearTimeout(t), t = null), t = setTimeout(function() { 
            o && (n.scrollTop() > n.height() ? e.addClass("show") : e.removeClass("show"), o = !1); 
           }, 500), o || (o = !0, e.removeClass("show")); 
          }; 

          n.on("scroll", i), i(), $(document).on("click", ".ev-scrolltop", function() { 
          $("html, body").stop().animate({ 
           scrollTop: 0 
          }, 500, "easeOutCirc").promise().done(function() { 
           o = !1, e.removeClass("show"); 
          }); 

         }); 
    } 

Answer 2

var t, n = $(window), 
e = $(".ev-scrolltop"), 
o = !1, 
a = function() { 
    t && (clearTimeout(t), t = null), 
    t = setTimeout(function() { 
     o && (e.fadeIn(), o = !1) 
    }, 
    500), 
    o || (o = !0, e.fadeOut()) 
} 

$(window).scroll(function() { 
    a(); 
});