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

首先，您已经习惯了许多.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");
    });
  });

});

Answer 2

使用此...

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

并深入了解 DEMO

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

2 个答案: