如何在滾動時隱藏按鈕並在滾動停止時顯示？

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