当用户自上而下滚动时，滚动到元素

Question

我正在尝试做一个像在App Builder网站上一样的效果。当用户在页眉与背景图像/视频滚动下来，网站滚动到下一个div/节/等。

如果用户回滚并到达图像/视频部分，则页面滚动到其顶部。

我已经尝试了以下代码，但是有一个bug我找不到：

function scrollto(where){
   $('html,body').animate({ scrollTop: $(where).offset().top - 65}, 800);
   console.log('Scrolled to ' + where);
   closeMenue();
}


var lastScrollTop = 0;
var scroll = $(window).scrollTop();
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){  
  if (scroll == 0){
    scrollto('.about');
  }
  else{
  }
} else {  
  if (scroll == 530){
    scrollto('.parallax'); 
  }
  else{
  }
}
lastScrollTop = st;
});

--它很好，但只有一次。有我可以使用的插件吗？对不起我的英语不好：

Answer 1

你发布的网站正在使用fullPage.js插件。

它可以使用CSS3转换，并在需要时回退到jQuery。

如果您不想使用jQuery，那么在开发中甚至会为它提供一个纯javascript版本，但它是功能性的。

Answer 2

不要使用jquery来平滑转换。最好用css方法来做。

如果想使用任何库，请检查这

Answer 3

所以，如果你想做类似的事情，我相信我在他们的网站上看到的是：

1. 没有滚动条；您需要使最上面的容器溢出:隐藏。最好是捕获滚动轮事件。有关更多细节，请参见这里：在jQuery中获取鼠标轮事件吗？
2. 活动视图端口获得一个“活动”类。他们大概是用它来跟踪要滚动到下一个视图的窗口，也许是为了确定

因此，在滚动轮事件处理程序中，您需要：

1. 先确定你是上是下。(在上面的SO链接中概述)
2. 您将需要找到下一个同级div/viewport/容器/任何不活动的内容。
3. 您将希望将活动类移动到相应的同级(上/下一个取决于上/下)，并使用scrollTop滚动到视图中。