Question

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

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

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

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

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

想象一下像 home / about / contact

这样的部分

我尝试了这个，但是在这个例子中，我必须写出元素的确切名称，我必须为每个部分写一个...有没有不同的方法这样做？

   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支持的旧浏览器上使用。
添加实时菜单。
使用键盘箭头滑动页面。
添加水平滑块。
移动和平板电脑检测，可以滚动它们。

<强>用法：

每个部分的定义均为div，其中包含section类。

<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

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

1 个答案: