自动滚动javascript

Question

我希望查看者在滚动时自动滚动到某个部分。 这样观众就看不到两个部分之间的屏幕（每个部分的高度为 1 vh）。只有最后一个部分#contact 的大小不是 1 vh。

我有一个可以运行的脚本，但必须有更好、更简洁的方法。此代码在 Chrome 中有效，但我必须等待一段时间才能再次滚动。它不适用于 Firefox

谁能告诉我如何正确完成或告诉我是否有插件？我什么都找不到！

var lastScrollTop = 0;
$(window).scroll(function(event){
var height = $(window).scrollTop();
var vheight = $(window).height();

if (height >= lastScrollTop){

if(height > 1  && height < 100) {
    $('html,body').animate({
      scrollTop: $('#mission').offset().top
    }, 500); 
}


if(height > 2 * vheight + 1 && height < 2 * vheight + 200){
    $('html,body').animate({
      scrollTop: $('#about').offset().top
    }, 500); 
}

if(height > 3 * vheight + 1 && height < 3 * vheight + 200){
    $('html,body').animate({
      scrollTop: $('#contact').offset().top
    }, 500); 
    $('#scrollAbout').hide(500);

}

} else {
  var docheight = $(document).height(); 
  docheight -= vwheight;

  if(height < vheight - 1  && height > vheight - 200) {
      $('html,body').animate({
        scrollTop: $('#home').offset().top
      }, 500); 
  }



  if(height < 3 * vheight - 1 && height >  3 *vheight - 200){
      $('html,body').animate({
        scrollTop: $('#case-studies').offset().top
      }, 500); 
  }

  if(height < docheight - 1 && height > docheight - 100){
      $('html,body').animate({
        scrollTop: $('#about').offset().top
      }, 500); 
      $('#scrollAbout').show(500);

  }


}
lastScrollTop = height;

Answer 1

听起来您正在寻找类似fullPage.js 库的东西。

更具体地说是this scenario，最后一个部分不是全屏的，但它仍然会自动滚动。 您可以通过使用fp-auto-height 类来实现这一点，详细说明in the documentation。

Here's a codepen