Javascript jquery动画滚动整个页面

我使用下面的代码滚动并捕捉页面上的各个部分。它在开始时工作得很好，但随后动画播放会有相当多的延迟。动画也很紧张，似乎是在随机间隔发生的。请帮忙

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementBottom > viewportTop && elementTop < viewportBottom;
};

let sections = $(".scroll-dest");
let lastSt = 0;
let running = false;

$(window).scroll(event => {
  if(!running) {
    running = true
  event.preventDefault();
  let current = null;

  sections.each((i, v) => {
    if ($(v).isInViewport()) current = i;
  });

  let st = $(this).scrollTop();
  if (st > lastSt) {
    // console.log("down");
    console.log(current != sections.length - 1)
    if (current != sections.length - 1) {
      $("html").animate(
        {
          scrollTop: $(sections[current + 1]).offset().top
        },
        500
      );
    }
  } else {
    // console.log("up");
    if (current > 0) {
      $("html").animate(
        {
          scrollTop: $(sections[current - 1]).offset().top
        },
        500
      );
    }
  }
  lastSt = st;
  running = false
}
});

$.fn.isInViewport=function（）{
var elementTop=$（this）.offset（）.top；
var elementBottom=elementTop+$（this.outerHeight（）；
var viewportTop=$（window.scrollTop（）；
var viewportBottom=viewportTop+$（window）.height（）；
返回elementBottom>viewportTop&&elementTop{
如果（！正在运行）{
运行=真
event.preventDefault（）；
让电流=零；
每节（（i，v）=>{
如果（$（v）.isInViewport（））当前=i；
});
设st=$（this.scrollTop（）；
如果（st>lastSt）{
//控制台。登录（“关闭”）；
console.log（当前！=sections.length-1）
如果（当前！=sections.length-1）{
$（“html”）.animate(
{
scrollTop:$（节[current+1]）.offset（）.top
},
500
);
}
}否则{
//控制台。登录（“up”）；
如果（当前>0）{
$（“html”）.animate(
{
scrollTop:$（节[current-1]）.offset（）.top
},
500
);
}
}
lastSt=st；
运行=错误
}
});

---

此外，脚本应该滚动到当前节之前或之后的节。但它是滚动页面的整个长度，这不是我想要的

不要为此使用滚动事件，请尝试为此使用滚动事件。创建它是为了解决像您这样的问题，以便在元素在视口中变得可见或相互相交时做出反应

首先，您要定义IO的选项：

let options = {
  rootMargin: '0px',
  threshold: 1.0
}

定义选项后，您可以说出要观察的元素：

const elements = document.querySelectorAll('.scroll-dest');

作为最后一步，您必须定义元素进入视图后发生的情况，并将其绑定到您定义的元素：

const intersectionObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {

    // when element's is in viewport,
    // do something with it!
    if (entry.intersectionRatio > 0) {
      animate(entry.target);
      // remove observer after animation (if it is no longer needed). 
      // remove this line if you want to continue observing this element.
      observer.unobserve(entry.target); 
    }
  });
});
elements.forEach((element) => intersectionObserver.observe(element));

如果您需要支持比使用此（官方）更旧的浏览器，它将通过侦听滚动事件重新创建交叉点观察者。因此，在较旧的浏览器上，它仍然会变慢，在这里您无能为力。但在较新的设备上，性能会有所提高

---

您还可以考虑使用而不是jqueryanimate来获得更好的性能

试着使用<代码> .Studio（）。在添加下一个动画之前，动画（{…<代码/代码>）清除队列。也可以考虑删除<代码>滚动< /COD>事件处理程序，因为它在执行复杂函数时可能是性能杀手。这样做会使动画变得非常慢，在jQuery中如何消除？