Question

我希望能够在向下滚动时直接转到下一个div，并在向上滚动时直接转到上一个div。这是我的文件，其中包含两个div的示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

第一次向下滚动似乎工作正常，但向上滚动时却没有，它似乎移动几个像素然后停止。有什么想法吗？

Answer 1

scrollTo是一个要添加到需要滚动到的div的类：

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

Javascript：滚动时从一个div滚动到另一个div？

1 个答案: