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

Question

我有不同的部分，具有不同的ID，并想滚动到它们。我使用document.getElementById（id）.scrollIntoView（）完成了此操作，但随后视图将在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>