Question

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

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

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

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

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()
      })

但是以这种方式，这是不必要的，因为仅通过普通链接即可获得相同的行为。

滚动到元素始终会重置视图，直到页面刷新

1 个答案: