如何滚动到整页的下一个 div？

Question

当它被点击平滑地滚动到下一个 div 和占 100% 高度的 Div 但我想滚动到下一个 div 而不是“下一步”按钮谁能帮我编辑这段代码？ 请帮助大家制作我的 web 网站

 $(".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>

Answer 1

我认为 CSS 的 Scroll Snap 特性可以帮助你；

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts https://caniuse.com/?search=scroll-snap

 $(".next").click(function() { $('html,body').animate({ scrollTop: $(".p2").offset().top }, 'slow'); });

 body { margin: 0; }.container { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; } div[class*=p] { scroll-snap-align: start; }.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="container"> <div class="p1"> </div> <div class="p2"> </div> <div class="p3"> </div> <div class="admin"> <button class="next">NEXT</button> </div> </div>