jquery - jQuery滚动到顶部淡入/淡出问题

Question

这段代码有两部分：

当用户向下滚动时，第一个应该在 .toTop 按钮中淡出，否则保持隐藏。

第二部分应该在点击它时将用户带到顶部。

与第一部分混合时，第二部分不起作用。我找不到两者之间的冲突。

<script>
    $(document).ready(function(){

        $(".toTop").hide();

        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 300) {
                    $('.toTop').fadeIn();
                } else {
                    $('.toTop').fadeOut();
                }
            });        
        });        
    });

        var easing, e, pos;
    $(function(){
      $(".toTop").on("click", function(){
        pos= $(window).scrollTop();
        $("body").css({
          "margin-top": -pos+"px",
          "overflow-y": "scroll", 
        });
        $(window).scrollTop(0);
        $("body").css("transition", "all 1s ease");
        $("body").css("margin-top", "0");
        $("body").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd", function(){
          $("body").css("transition", "none");
        });
      });
    });      
</script>

Answer 1

用这个...

$(document).ready(function(){

        $(".toTop").hide();

        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 200) {
                    $('.toTop').fadeIn();
                } else {
                    $('.toTop').fadeOut();
                }
            });        
        });        
    });

var easing, e, pos;
    $(function(){
      $(".toTop").on("click", function(){
        pos= $(window).scrollTop();
        $("body").css({
          "margin-top": -pos+"px",
          "overflow-y": "scroll", 
        });
        $(window).scrollTop(0);
        $("body").css("transition", "all 1s ease");
        $("body").css("margin-top", "0");
        $("body").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd", function(){
          $("body").css("transition", "none");
        });
      });
    });

和dee这个DEMO

Answer 2

第一点是，您已经习惯了许多.ready()事件处理程序。删除所有冗余：

$(document).ready(function(){

  $(".toTop").hide();

  $(window).scroll(function () {
      if ($(this).scrollTop() > 300) {
           $('.toTop').fadeIn();
      } else {
           $('.toTop').fadeOut();
      }
  });        

  var easing, e, pos;
  $(".toTop").on("click", function(){
    pos = $(window).scrollTop();
    $("body").css({
      "margin-top": -pos+"px",
      "overflow-y": "scroll", 
    });
    $(window).scrollTop(0);

    $("body").css("transition", "all 1s ease");
    $("body").css("margin-top", "0");
    $("body").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd", function(){
      $("body").css("transition", "none");
    });
  });

});