Javascript 如何滚动到具有特定div类的第一个可见元素？

是否仍然可以使用javascript自动滚动到具有特定div类的第一个可见元素

---

谢谢

您应该能够使用以下内容：

$('html, body').animate({
    scrollTop: $('.class:visible:first').offset().top
}, 1000);

---

演示：

可以很容易地用普通JS完成：

const items = container.getElementsByClassName('active');
const visible = [...items].filter((el) => {
  // jQuery-like :visible selector
  return !!( el.offsetWidth || el.offsetHeight || el.getClientRects().length );
});

if (visible.length > 0) {
  container.scrollTo({
    top: items[0].offsetTop,
    behavior: 'smooth'
  });
}

这假定：

• container

  是可滚动的容器，如果您试图滚动整个页面，可以将其替换为

  document

  &

  window

• 您正在查找第一个具有

  活动

  类名的项
• 如果想要平滑滚动，请删除

  行为：'smooth'

  config，如果希望滚动在一次跳转中立即发生

---

请参阅此堆栈溢出文章：尽量不要重新打开以前提出的问题。上面链接的问题与此处提出的问题类似，但不是重复的问题。如果元素不存在，则会触发JavaScript错误。您只需添加如下内容：“if（$（“.class”）[0]）{//SCROLL}”为避免该错误，这不是第一个可见元素。这只是第一个元素。