導致延遲鏈接點擊的滾動功能衝突

Question

我有兩種不同的功能。

首先，我得到了頁面上錨鏈接的平滑滾動。

$(window).on("load",function() { 
     // bind click event to all internal page anchors 
     $('a[href*="#"]').on('click', function (e) { 
       // prevent default action and bubbling 
       e.preventDefault(); 
       e.stopPropagation(); 
       // set target to anchor's "href" attribute 
       var target = $(this).attr('href'); 
       // scroll to each target 
       $(target).velocity('scroll', { 
         duration: 700, 
         offset: -50, 
         easing: 'ease', 
       }); 
     }); 
}); 

另一種是當您滾動到它時淡入內容。

// fade all the sections 
$(window).on("load",function() { 
    $(window).scroll(function() { 
    var currentPos = $(this).scrollTop() 
    $(".section").each(function() { 
      var topPos = $(this).offset().top - 500, 
        bottomPos = topPos + $(this).outerHeight(); 

     /* If the element is completely within bounds of the window, fade it in */ 
     if (currentPos >= topPos && currentPos <= bottomPos) { //object comes into view (scrolling down) 
     $(this).fadeTo(700,1); 
     } 
    }); 
    }) //invoke scroll-handler on page-load 
}); 

如果我刪除這些功能中的任何一個，整個事情都會正常工作。使用這兩種方法後，他們只會在點擊頁面後之後導致頁面的鏈接點擊次數大大延遲。

Answer 1

解決方案：

使用的，而不是jQuery的

CSS的淡入淡出