-1

I want to make a Back to top button like the page below https://www.k-kosho.co.jp/

As the scroll button will be hidden, only show again when I stop the scroll.

This is my start js, hope everyone helps.

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

Thank you everyone!

tranthaihoang
  • 436
  • 1
  • 6
  • 22

2 Answers2

0

I solved my problem successfully!

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

                        });
    }
tranthaihoang
  • 436
  • 1
  • 6
  • 22
0
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();
});
alimay
  • 1
  • Stack Overflow is not a site for code sharing. It is for instruction. Please add some context to this answer, and provide why your code fixes the issue. –  Sep 14 '17 at 09:18