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

当滚动停止时如何在滚动和显示时隐藏按钮？

2 个答案: