javascript - 一旦用户到达页面上的特定点，自动滚动到特定点/ anchor

Question

所以，这里是:

我将有 4 个 div。下面的例子。每个 div 都有一个特定的高度(大约 1500 像素)，但宽度为 100%。每个 div 都是不同的颜色。

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

因此，假设用户垂直滚动并且出现 div #2 而 div #1 正在消失。当 div #1 还剩下大约 200px 时，页面将自动向下滚动，以便 div #2 与浏览器窗口的顶部齐平。

一个很好的例子:http://thejuly16.com/基本上可以做到，但不知道如何做。

---

1

内容在这里

---

2

内容在这里

---

3

内容在这里

---

4

内容在这里

---

Answer 1

那个页面对我没有任何作用:/

无论如何，如果我明白你的意思，你应该在每个 div 的顶部有一些 anchor ，将一些代码挂接到滚动事件，检查它的 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 语句。