最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

jquery - Javascript: scroll from one div to the other when scrolling? - Stack Overflow

programmeradmin3浏览0评论

I want to be able, when scrolling down, to go directly to the next div, and when scrolling up, to go directly to the previous div. Here are my files with an example with two 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=".1.1/jquery.min.js"></script>
<div id="black_hole">
</div>
<div id="space_od">
</div>

I want to be able, when scrolling down, to go directly to the next div, and when scrolling up, to go directly to the previous div. Here are my files with an example with two 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="black_hole">
</div>
<div id="space_od">
</div>

It seems to work fine when scrolling down the first time, but not when scrolling up, it seems to move a few pixels and then stop. Any ideas?

Share Improve this question edited Aug 18, 2017 at 15:10 H. Pauwelyn 14.3k28 gold badges92 silver badges161 bronze badges asked Aug 9, 2015 at 15:22 Antoni4040Antoni4040 2,31911 gold badges45 silver badges56 bronze badges 3
  • I've had to do this several times and have never seen a concise implementation. This library has worked well for me: github./zynga/scroller. This one, github./peachananr/onepage-scroll, is also popular on GitHub but I don't like the API as much. – rojobuffalo Commented Aug 9, 2015 at 15:44
  • possible duplicate of stackoverflow./questions/11171828/… – Roko C. Buljan Commented Aug 9, 2015 at 15:46
  • Fiddle example: jsfiddle/r3x7r/410 – Roko C. Buljan Commented Aug 9, 2015 at 15:46
Add a ment  | 

1 Answer 1

Reset to default 6

scrollTo is a class to add to the divs you need to scroll to:

<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;
        });
    });
发布评论

评论列表(0)

  1. 暂无评论