Question

我正试图在App Builder Website上做一个效果。当用户位于带有背景图像/视频的标题并向下滚动时，该站点向下滚动到下一个div / section / etc. 。
如果用户向上滚动并且到达图像/视频部分，页面会滚动到它的顶部。
我尝试了下面的代码，但是有一些我找不到的错误：

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 plugin。

它使用CSS3过渡，并在需要时回退到jQuery。

如果你不想使用jQuery，那么它在开发中甚至可以使用pure javascript version但功能正常。

Answer 2

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

检查this是否要使用任何库

Answer 3

所以，如果你想做类似的话，我认为我在他们的网站上看到的是：

没有滚动条;你需要让你的最顶层容器溢出：隐藏。捕获滚轮事件可能是最好的。有关详情，请参阅此处：Get mouse wheel events in jQuery?
活动视口获取“活动”类。他们可能会使用它来跟踪哪个视口滚动到下一个并可能确定

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

首先确定您是上升还是下降。（在上面的SO链接中概述）
您需要找到下一个兄弟div / viewport / container /无效的任何内容。
您需要将活动类移动到适当的兄弟（上一个/下一个，具体取决于上/下），并使用scrollTop将其滚动到视图中。

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

3 个答案: