javascript - 向下滚动页面到下一个元素

Question

当用户使用鼠标滚轮向下滚动时，我希望页面向下滚动直到下一个元素的开头。喜欢:

<section class="One">
   ...
</section>

<section class="Two">
   ...
</section>

<section class="Three">
   ...
</section>

当你进入网站时，你会在开始页面，当你向下滚动 1 倍时，我希望页面滚动到第 2 部分的开头等等......

想象一下这样的部分，主页/关于/联系

我试过了，但在这个例子中，我必须写下元素的确切名称，而且我必须为每个部分写一个这样的名字......有没有不同的方法来做到这一点？

   window.onload=function myScroll() {
     x = document.getElementById("chat");
     h = x.clientHeight;
     x.scrollTop = h;
    }

<div id="chat" style="width: 100%; height: 70px; overflow: scroll;
        border: 1px solid grey">

Answer 1

这可能会非常复杂，因为这涉及滚动、捕获鼠标滚轮事件、动画延迟、跨浏览器使用、滑动和触摸事件。幸运的是，有一些插件可以让您的生活更轻松。最受欢迎的之一是 Full Page .

一些功能包括:

• 在不支持 CSS3 的旧浏览器上使用。
• 添加实时菜单。
• 使用键盘箭头滑动页面。
• 添加水平 slider 。
• 支持滚动的移动设备和平板电脑检测。

用法:

每个部分都将使用包含 section 类的 div 定义。

<div class="section">
    <div class="slide"> Slide 1 </div>
    <div class="slide"> Slide 2 </div>
    <div class="slide"> Slide 3 </div>
    <div class="slide"> Slide 4 </div>
</div>

您需要做的就是在 $(document).ready 函数中调用插件:

jQuery:

$(document).ready(function() {
    $('#fullpage').fullpage();
});

Demo