Question

当向下滚动页面时，是否有人可以推荐一种“最佳”方法来将滚动条捕捉到元素的顶部？

例如，如果我的布局如下：

<div id="section-one" style="width: 100%; height: 600px;">
    Section One
</div>

<div id="section-two" style="width: 100%; height: 600px;">
    Section Two
</div>

<div id="section-three" style="width: 100%; height: 600px;">
    Section Three
</div>

<div id="section-four" style="width: 100%; height: 600px;">
    Section Four
</div>

如果用户正在查看第一部分并开始浏览第二部分开始参与浏览器视口，我希望浏览器自动捕捉到下一个div的顶部。

我熟悉.scroll（）和.scrollTop，但不知道从哪里开始。

Answer 1

您可以使用isScrolledIntoView创建的@Scott Dowding函数检查元素是否在视口中，

这是一个例子，

$(document).scroll(function() {
    $("div:not(.highlight)").each(function() {
        if (isScrolledIntoView(this)) {
           $("div").removeClass("highlight");
           $(this).addClass("highlight");
           $("body").animate({ scrollTop: $(this).offset().top }, 1000)
        }
    });
});

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return (elemTop <= docViewBottom) && (elemTop > docViewTop);
}

DEMO

Answer 2

你可以做的是设置

body {
overflow:hidden
}

并且可以控制用户互动，假设您有一个菜单，如果用户选择菜单中的一个部分，您只需使用scrollTop设置动画以重定向到该部分。

另一个解决方案，因为你有一个600px的定义高度你可以用scrollTop计算并滚动用户在文档中的位置就像这样......

$(window).scroll(function () { 
      console.log($(window).scrollTop());
});

示例：http://jsfiddle.net/3STQN/

Answer 3

如果多个div可以进入视图，那么你可以将函数isScrolledIntoView更改为isTopInTheView，或者类似的东西。在该功能中，您可以检查div的顶部是否可见，如果是，则将该div移动到屏幕顶部。

编辑：当然，一旦你找到满足要求的第一个div，只需从函数返回，这样它就不能检查更多的div。

在Scroll上捕捉Div / Element的顶部

3 个答案: