所以我正在制作一个网站,其中有很多占 100% 高度的 Div。 我想制作一个按钮,以便在单击它时平滑地滚动到下一个 div。 我编写了一些代码,因此当它被点击时,它会滚动到特定的 div。
$(".next").click(function() {
$('html,body').animate({
scrollTop: $(".p2").offset().top},
'slow');
});
body{
margin: 0;
height: 100%;
}
.p1{
height: 100vh;
width: 70%;
background-color: #2196F3;
}
.p2{
height: 100vh;
width: 70%;
background-color: #E91E63;
}
.p3{
height: 100vh;
width: 70%;
background-color: #01579B;
}
.admin{
background-color: #B71C1C;
height: 100vh;
position: fixed;
right: 0%;
top: 0%;
width: 30%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p1">
</div>
<div class="p2">
</div>
<div class="p3">
</div>
<div class="admin">
<button class="next">NEXT</button>
</div>
最佳答案
要完成这项工作,您需要识别当前显示的 div
。为此,您可以将一个类应用于当前显示的元素。然后你可以使用 next()
遍历它们。
另请注意,在下面的示例中,在所有元素上添加了一个公共(public)类 .p
,以便 DRY up CSS 并使 DOM 遍历更容易。
$(".next").click(function() {
var $target = $('.p.active').next('.p');
if ($target.length == 0)
$target = $('.p:first');
$('html, body').animate({
scrollTop: $target.offset().top
}, 'slow');
$('.active').removeClass('active');
$target.addClass('active');
});
body {
margin: 0;
height: 100%;
}
.p {
height: 100vh;
width: 70%;
}
.p1 {
background-color: #2196F3;
}
.p2 {
background-color: #E91E63;
}
.p3 {
background-color: #01579B;
}
.admin {
background-color: #B71C1C;
height: 100vh;
position: fixed;
right: 0%;
top: 0%;
width: 30%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p p1 active"></div>
<div class="p p2"></div>
<div class="p p3"></div>
<div class="admin">
<button class="next">NEXT</button>
</div>
关于javascript - 如何使用 Javascript 滚动到下一个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54803901/