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，其中最后一部分不是全屏，但仍然会自动滚动。您可以使用详细in the documentation的fp-auto-height类来实现这一目标。

Here's a codepen

自动滚动javascript

1 个答案: