导致延迟链接点击的滚动功能冲突

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的淡入淡出