自动滚动 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 class 来实现，详见 in the documentation.

Here's a codepen

自动滚动 javascript

Automatic scroll javascript

javascript

jquery

scroll

smooth-scrolling