jQuery를 스크롤 상단 페이드 인/아웃 문제

Question

에이 코드는 두 부분으로 구성되어 있습니다.

두 번째 부분은 사용자를 클릭 할 때 맨 위에 표시되어야합니다.

제 2 부는 제 1 부와 혼합되었을 때 작동하지 않습니다. 나는 둘 사이의 갈등을 발견 할 수 없다.

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

을 그리고이 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"); 
    }); 
    }); 

});