Javascript: Scrollen von einem Div zum anderen beim Scrollen?

Question

Ich möchte in der Lage sein, beim Scrollen nach unten, direkt zum nächsten Div zu gehen, und beim Scrollen nach oben, um direkt zum vorherigen Div. Hier sind meine Dateien mit einem Beispiel mit zwei divs:

$(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>

Es scheint gut zu funktionieren, wenn das erste Mal nach unten scrollen, aber nicht beim Scrollen nach oben, so scheint es, ein paar Pixel zu bewegen und dann hör auf. Irgendwelche Ideen?

Answer 1

scrollTo ist eine Klasse, um die divs Sie blättern müssen hinzuzufügen:

<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; 
     }); 
    });