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

解决方案：

使用css代替淡入淡出而不是Jquery

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

1 个答案: