Question

所以，这是：

我将有4个div。以下示例。每个div特定高度（约1500px）但宽度为100％。每个div都是不同的颜色。

我想要它，以便当用户滚动页面并到达特定点时，javascript将启动并自动将用户滚动到下一个div。

所以，说用户是垂直滚动，div＃2出现，div＃1正在消失。当div＃1剩下大约200px时，页面将自动向下滚动，以便div＃2与浏览器窗口的顶部齐平。

一个很好的例子：http://thejuly16.com/基本上这样做但却无法解决问题。

1

此处的内容

2

此处的内容

3

此处的内容

4

此处的内容

Answer 1

该页面并没有为我做任何事情：/

无论如何，如果我明白了你的意思，你应该在每个div的顶部都有一些锚点，将一些代码挂钩到滚动事件，检查它上面的scrollTop()值，并在此值为时滚动到锚点在期望的范围内。您可以查看this fiddle和相关的jQuery代码：

$(window).bind('scroll', function(){
    if (($(window).scrollTop() > 1300) && ($(window).scrollTop() < 1350)) {
        window.scrollTo(0,1500);
    }
});

对于用户来说，这可能是一种奇怪的行为，因为向上滚动非常混乱。但是，我们可以通过检查用户是否在页面中上升或下降来解决此问题，例如在this fiddle中，只检查上一个滚动位置是高于还是低于当前滚动位置：

var currentScroll = 0;
var previousScroll = 0;

$(window).bind('scroll', function(){
    currentScroll = $(window).scrollTop();
    if (($(window).scrollTop() > 1300) && ($(window).scrollTop() < 1350) && currentScroll > previousScroll) {
        window.scrollTo(0,1500);
    }
    previousScroll = $(window).scrollTop();
});

显然，你需要添加尽可能多的if语句作为＆＃34; jumps＆＃34;你想要在你的页面。

Answer 2

我有一个解决方案，如下面的代码所示。不知怎的，它不是在jsFiddle工作，而是在我的机器上工作。请在您自己的编辑器中尝试

<HTML>
 <HEAD>
  <SCRIPT LANGUAGE="JavaScript">
    var isWorking = false;
var lastScrollPosition
function adjust(oDiv) {
    if(oDiv.scrollTop > lastScrollPosition && !isWorking && oDiv.scrollTop % 400 > 300) {
        isWorking = true
        scroll(oDiv);
    } else
        lastScrollPosition = oDiv.scrollTop;
}

function scroll(div) {
    if(div.scrollTop % 400 > 10) {
        div.scrollTop = div.scrollTop + 10;
        lastScrollPosition = div.scrollTop;
        setTimeout(function(){scroll(div);}, 10);
    } else
        isWorking = false;
}
  </SCRIPT>
 </HEAD>

 <BODY>
  <div style="height: 440px; border: solid 1px red; overflow-Y: auto" onscroll="adjust(this)">
    <div style="height: 400px; border: solid 1px green"></div>
    <div style="height: 400px; border: solid 1px green"></div>
    <div style="height: 400px; border: solid 1px green"></div>
    <div style="height: 400px; border: solid 1px green"></div>
    <div style="height: 100px"></div>
</div>
 </BODY>
</HTML>

Answer 3

我认为jQuery可以使用此功能。我试过这个，但我在Javascript中的OnClick事件上这样做。在您的情况下，onFocus或任何其他合适的事件，如鼠标悬停等应该可以工作。

希望这有帮助。

一旦用户到达页面上的特定点，就会自动滚动到特定点/锚点

3 个答案: