滚动到下一节

Question

我正在建立一个网站，我想让它移动到下一节自动当用户使用html/css和js之间滚动。

一个完美的例子是在特斯拉网站:https://www.tesla.com/一旦你滚动出一个部分，网站将自动向下移动到下一个或上一个部分。

我很难在网上找到这个文档，如果有人能告诉我如何实现这一点，谢谢

Answer 1

我已经为您创建了一个设置，检查您是需要滚动到下一节还是上一节。

我希望你能从这个设置中创建剩下的

var lastScrollLocation = 0;
$(window).scroll(function() {
if ($(window).scrollTop() > lastScrollLocation) {
lastScrollLocation = $(window).scrollTop();
console.log("next section");
} else {
lastScrollLocation = $(window).scrollTop();
console.log("previous section");
}
});

.container section {
height: 100vh;
display: flex;
}
.container section p {
margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<section>
<p>
Section #1
</p>
</section>
<section>
<p>
Section #2
</p>
</section>
<section>
<p>
Section #3
</p>
</section>
<section>
<p>
Section #4
</p>
</section>
</div>