Javascript: прокрутка от одного div к другому при прокрутке?

Question

Я хочу, чтобы прокрутить вниз, чтобы перейти непосредственно к следующему div, и при прокрутке вверх, чтобы перейти непосредственно к предыдущему div. Вот мои файлы с примером с двумя дивы:

$(document).ready(function() { 
 
    var lastScrollTop = 0; 
 

 
    function findPos(obj) { 
 
    var curtop = 0; 
 
    if (obj.offsetParent) { 
 
     do { 
 
     curtop += obj.offsetTop; 
 
     } while (obj = obj.offsetParent); 
 
     return [curtop]; 
 
    } 
 
    } 
 

 
    $(window).scroll(function(event) { 
 
    var st = $(this).scrollTop(); 
 
    if (st > lastScrollTop) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("#space_od").offset().top 
 
     }, 500); 
 
    } else { 
 
     $('html, body').animate({ 
 
     scrollTop: $("#black_hole").offset().top 
 
     }, 500); 
 
    } 
 
    lastScrollTop = st; 
 
    }); 
 
});

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#black_hole { 
 
    background-image: url("black_hole.jpg"); 
 
    background-position: center; 
 
    display: block; 
 
    height: 100vh; 
 
    width: 100%; 
 
} 
 

 
#space_od { 
 
    background-image: url("2001.png"); 
 
    background-position: center; 
 
    display: block; 
 
    height: 100vh; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="black_hole"> 
 
</div> 
 
<div id="space_od"> 
 
</div>

Это, кажется, работает хорошо, когда прокрутка вниз в первый раз, но не при прокрутке, кажется, чтобы переместить несколько пикселей и затем остановитесь. Есть идеи?

Answer 1

scrollTo класс, чтобы добавить к дивам вам нужно для прокрутки:

<div id="black_hole" class="scrollTo"> 

</div> 
<div id="space_od" class="scrollTo"> 

</div> 

Js

var scrolling = false; 
var currentPos = 0; 

    function scrollUp(){ 
     if(!scrolling && currentPos > 0){ 
      scrolling=true; 
      currentPos --; 
      var scrollToElement = $('.scrollTo')[currentPos]; 

      $('html, body').animate({ 
       scrollTop: $(scrollToElement).offset().top 
      }, 500, function(){ 
       scrolling = false; 
      });  
     } 
    } 

    function scrollDown(){ 
     if(!scrolling && currentPos < $('.scrollTo').length-1 ){ 
      scrolling=true; 
      currentPos ++; 
      var scrollToElement = $('.scrollTo')[currentPos]; 

      $('html, body').animate({ 
       scrollTop: $(scrollToElement).offset().top 
      }, 500,function(){ 
       scrolling = false; 
      }); 
     } 
    }  

    $(document).ready(function() { 

     // Get the current position on load 

     for(var i = 0; i < $('.scrollTo').length; i++){ 
      var elm = $('.scrollTo')[i]; 

      if($(document).scrollTop() >= $(elm).offset().top){ 
       currentPos = i; 
      } 
     } 

     $(document).bind('DOMMouseScroll', function(e){ 
      if(e.originalEvent.detail > 0) { 
       scrollDown(); 
      }else { 
       scrollUp(); 
      } 
      return false; 
     }); 

     $(document).bind('mousewheel', function(e){ 
      if(e.originalEvent.wheelDelta < 0) { 
       scrollDown(); 
      }else { 
       scrollUp();  
      } 
      return false; 
     }); 
    });