Question

我有一个严重的问题：我有一个带有5个整页div的引导页面，我需要自动滚动：

如果向下滚动第一个div 30％，则自动滚动到第二个div。如果你向下滚动第二个div 30％，向下滚动到第三个div等。

我找不到一个好的方法而且我不擅长jquery。：/ 这段代码没问题，但我无法在自动滚动后滚动。：d

$(window).on("scroll", function () {
    if ($(this).scrollTop() > 300) {
$('html, body').animate({
    scrollTop: $("#A2").offset().top
}, 100);}});

感谢您的帮助！

Answer 1

我会使用：

https://alvarotrigo.com/fullPage/#firstPage 或http://scrollmagic.io/

两者都可以达到这个目的，这取决于你是否想要使用插件

Answer 2

有很多方法可以做到这一点。我有两种方法。因为你没有发布任何CSS或标记。我只假设以下准系统

<div class="scene">
<div class="first blade"> <h2>FIRST</h2></div>
  <div class="second blade"><h2>SECOND</h2></div>
  <div class="third blade"><h2>THIRD</h2></div>
</div>

.blade {
  height: 100vh;
  width: 100%;  
  border: 1px solid green;
}

方法1 jquery

$('.blade').each(function(){
  $(this).data('cutOff', $(this).height() * 0.3 + $(this).offset().top)
 });

$(window).on("scroll", function () {
   var scrollVal = $(this).scrollTop();

   $('.blade').each(function(index){
     if(scrollVal>=$(this).data('cutOff')) {
            if($(this).data('cutOffReached') == false && (index <=$('.blade').length -1)){
              $('html, body').animate({
                scrollTop: $(this).next().offset().top
            }, 100);
            $(this).data('cutOffReached', true);        
          }        
     }else {
          $(this).data('cutOffReached', false)
     } 
    });
});

小提琴 https://jsfiddle.net/fjcnnt6t/

像@Emmanuel提到的方法2滚动魔术。我的goto库可以提供更多控制。

 var controller = new ScrollMagic.Controller(); 

 $('.blade').each(function(index){ 
   var scene;
   var blade = $(this);
   var offset = $(this).height() * 0.3;
   scene = new ScrollMagic.Scene( {triggerElement: this, triggerHook:0, duration: $(this).height() - offset, offset: offset} );

   scene.on('enter', function(e){
      if((index <  $('.blade').length - 1) && e.scrollDirection == "FORWARD") {
          $('html, body').animate({
              scrollTop: blade.next().offset().top
          }, 100);
      }
   });
   scene.on('leave', function(){

   });
   scene.addTo(controller);
    // To get a clear perspective of the trigger points uncomment this
   //scene.addIndicators({name: 'scene '+index})
 });

小提琴 https://jsfiddle.net/og1s8uga/

注意：这种用户体验非常值得怀疑。 2.建议你使用scrollmagic，因为它提供了精细控制。

滚动后的Jquery自动滚动30％

2 个答案: