滚动到元素总是重置视图，直到页面刷新

Question

我目前正在尝试创建一个包含 4 个部分的小型单页网站。首先是一个单一的图像登陆页面，然后是下面的 3 个“关于”部分，它们都应该设置在完整的视口中。

我正在尝试使用一些 javascript 来在单击按钮时平滑滚动到每个部分，但是当我单击按钮时，会触发 javascript 事件并且页面会快速滚动到正确的部分，然后又返回到起始位置。

我已经尝试了多个版本的 JS 来使其正常工作，但我认为这可能是导致该缺陷的其他原因。

我在关注this tutorial。

并尝试使底部文本部分与第一个相同。

document.getElementById('readMore').addEventListener('click', function() {
  document.getElementById('section-a').scrollIntoView();
});

/* Zero out padding/margin - sets 0 for all CSS styling */

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-style: 17px;
  color: #926239;
  line-height: 1.6;
}

#showcase {
  background-image: url(../img/background.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  text-align: left;
  padding: 0 20px;
}

#section-a,
#section-b,
#section-c {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  text-align: left;
}

#showcase h1 {
  font-size: 80px;
  line-height: 1.2;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

#showcase h2 {
  font-size: 40px;
  line-height: 1.2;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

#section-a,
#section-c {
  padding: 20px;
  background: #926239;
  color: white;
  text-align: center;
}

#section-b {
  padding: 20px;
  background: #fff;
  text-align: center;
}

#seeMore {
  padding: 20px 0px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>firstName lastName</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
  <link rel="stylesheet" href="public/css/style.css" />
</head>

<body>
  <header id="showcase">
    <h1>firstName lastName</h1>
    <h2>Job Title</h2>
    <div>
      <a href="" id="readMore" class="btn btn-primary">Read More</a>
    </div>
  </header>

  <section id="section-a">
    <div></div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur iusto saepe eligendi rem neque esse dolor? Sunt sint illum, numquam reiciendis eum provident cum corporis perspiciatis architecto! Quisquam tenetur quia facilis natus, sed delectus eligendi
      corrupti quae inventore enim omnis rem provident ipsum sit quo, impedit libero sequi laboriosam quas nihil iste cumque corporis illum? Similique dicta perferendis, doloremque consequuntur ab molestiae magnam illo qui numquam nostrum ad quod, enim,
      molestias libero. Quam ad nisi officiis quis ipsam necessitatibus fuga hic, architecto sed, quae harum dicta incidunt culpa veniam reprehenderit sunt ratione vitae molestiae iste sapiente, impedit consequuntur cum perspiciatis?
    </p>
  </section>
  <section id="section-b">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur iusto saepe eligendi rem neque esse dolor? Sunt sint illum, numquam reiciendis eum provident cum corporis perspiciatis architecto! Quisquam tenetur quia facilis natus, sed delectus eligendi
      corrupti quae inventore enim omnis rem provident ipsum sit quo, impedit libero sequi laboriosam quas nihil iste cumque corporis illum? Similique dicta perferendis, doloremque consequuntur ab molestiae magnam illo qui numquam nostrum ad quod, enim,
      molestias libero. Quam ad nisi officiis quis ipsam necessitatibus fuga hic, architecto sed, quae harum dicta incidunt culpa veniam reprehenderit sunt ratione vitae molestiae iste sapiente, impedit consequuntur cum perspiciatis?
    </p>
  </section>
  <section id="section-c">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur iusto saepe eligendi rem neque esse dolor? Sunt sint illum, numquam reiciendis eum provident cum corporis perspiciatis architecto! Quisquam tenetur quia facilis natus, sed delectus eligendi
      corrupti quae inventore enim omnis rem provident ipsum sit quo, impedit libero sequi laboriosam quas nihil iste cumque corporis illum? Similique dicta perferendis, doloremque consequuntur ab molestiae magnam illo qui numquam nostrum ad quod, enim,
      molestias libero. Quam ad nisi officiis quis ipsam necessitatibus fuga hic, architecto sed, quae harum dicta incidunt culpa veniam reprehenderit sunt ratione vitae molestiae iste sapiente, impedit consequuntur cum perspiciatis?
    </p>
  </section>
</body>
<script src="./public/js/javascript.js"></script>

</html>

一旦我了解了它的工作原理，我就会在每个部分中设置按钮，让您在这些部分中上下移动。

Answer 1

您必须阻止链接的默认行为。所以你可以这样做：

document
      .getElementById('readMore')
      .addEventListener('click', function(event) {
        event.preventDefault()
        document.getElementById('section-a').scrollIntoView()
      })

但这种方式是不必要的，因为您只需使用普通链接即可获得相同的行为。