当用户从上向下滚动时滚动到元素

Question

我正在尝试制作类似 App Builder Website 的效果。当用户在带有背景 image/video 的页眉处向下滚动时，网站会向下滚动到下一个 div/section/etc。 .
如果用户向上滚动并到达 image/video 部分，页面将滚动到它的顶部。
我已经尝试了以下代码但是我找不到错误：

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

不要使用 jquery 进行平滑过渡。最好使用 css 方法。

如果要使用任何库，请勾选 this

Answer 2

所以，如果您想做类似的事情，我相信我会在他们的网站上看到以下内容：

无滚动条；您需要使最顶层的容器溢出：隐藏。最好捕获滚轮事件。详情请看这里：Get mouse wheel events in jQuery?
活动视口获得 class "active"。他们大概是用它来跟踪下一个要滚动到哪个视口，并可能确定

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

首先确定你是向上还是向下。（在上面的 SO link 中概述）
您需要找到下一个 div/viewport/container/whatever 不活跃的兄弟姐妹。
您需要将活动 class 移动到相应的同级（previous/next 取决于 up/down）并使用 scrollTop 将其滚动到视图中。

Answer 3

您发布的网站正在使用 fullPage.js plugin。

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

如果您不想使用 jQuery，甚至还有一个 pure javascript version 用于开发中，但可以正常使用。

当用户从上向下滚动时滚动到元素

Scroll to element when user scrolls from top down

html

javascript

jquery

scroll