我目前正在尝试创建一个包含 4 个部分的小型单页网站。首先是一个单一的图像登陆页面，然后是下面的 3 个“关于”部分，它们都应该设置在完整的视口(viewport)中。
我正在尝试使用一些 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>一旦我理解了它是如何工作的，我就会在每个部分中设置按钮，让您上下移动这些部分。
最佳答案
您必须防止链接的默认行为。所以你可以这样做:
document
.getElementById('readMore')
.addEventListener('click', function(event) {
event.preventDefault()
document.getElementById('section-a').scrollIntoView()
})
但这种方式是不必要的，因为您只需使用普通链接即可获得相同的行为。
关于javascript - 滚动到元素总是重置 View 直到页面刷新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56092981/