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

而D形電極這個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"); 
    }); 
    }); 

});