javascript - 如何在不知道高度的情况下使用 js dom 滚动到 div？

Question

我有不同 ID 的不同部分，我想滚动到它们。我用 document.getElementById(id).scrollIntoView() 做到了，但是 View 将滚动到 div 的中间而不是开始。我更喜欢没有 jquery 的解决方案。所以简化的代码看起来像这样:

CSS

#id1 {
        height: 200vh;
        background: black;
      }
#id2 {
        height: 200vh;
        background: yellow;
      }

HTML

<section id="id1">
   <div href="" (click)="scrollTo('id2')">
</section>
<section id="id2">
   <div href="" (click)="scrollTo('id1')">
</section>

Javascript

scrollTo(id) {
    document.getElementById(id).scrollIntoView({
      behavior: "smooth"
    });

Answer 1

将 block: 'start' 添加到您的 scrollIntoView 选项

function scrollToA(id) {
  document.getElementById(id).scrollIntoView({
    behavior: "smooth",
    block: "start"
  });
}

#id1 {
  height: 200vh;
  background: black;
}

#id2 {
  height: 200vh;
  background: yellow;
}

div {
  width: 100%;
  height: 100%;
}

<section id="id1">
  <div onclick="scrollToA('id2')"></div>
</section>
<section id="id2">
  <div onclick="scrollToA('id1')"></div>
</section>