Animate the next page instead of scrolling

Question

Animate the next page instead of scrolling

I am trying to animate the scroll in the next and previous sections using the viewport, but something went wrong, it takes too much time to reach a given position, and I cannot go back to the previous section.

Jsfiddle

$(window).scroll(function() {
  var page = $('html, body')
  var delta = 50;
  var vp_top = $(this).scrollTop();
  var vp_bottom = vp_top + $(this).height();

  var sec1_top = $('#sec1').offset().top;
  var sec1_top_delta = sec1_top + delta;
  var sec1_bottom = sec1_top + $('#sec1').height();
  var sec1_bottom_delta = sec1_bottom - delta;

  var sec2_top = $('#sec2').offset().top;
  var sec2_top_delta = sec2_top + delta;
  var sec2_bottom = sec2_top + $('#sec2').height();
  var sec2_bottom_delta = sec2_bottom - delta;

  var sec3_top = $('#sec3').offset().top;
  var sec3_top_delta = sec3_top + delta;
  var sec3_bottom = sec3_top + $('#sec3').height();
  var sec3_bottom_delta = sec3_bottom - delta;

  var last_scroll = 0;

  if (vp_top < sec1_top_delta && vp_bottom > sec1_bottom_delta) {
    $('#sec1').addClass('crr');
  } else {
    $('#sec1').removeClass('crr');
  }

  if (vp_top < sec2_top_delta && vp_bottom > sec2_bottom_delta) {
    $('#sec2').addClass('crr');
  } else {
    $('#sec2').removeClass('crr');
  }

  if (vp_top < sec3_top_delta && vp_bottom > sec3_bottom_delta) {
    $('#sec3').addClass('crr');
  } else {
    $('#sec3').removeClass('crr');
  }

  $(window).scroll(function(event) {
    if (vp_top > last_scroll) {
      $('html, body').animate({
        scrollTop: $('#' + $('.crr').data('next')).offset().top
      }, 500);
    }
    if (vp_top < last_scroll) {
      $('html, body').animate({
        scrollTop: $('#' + $('.crr').data('prev')).offset().top
      }, 500);
    }
    last_scroll = vp_top;
  });

});

section {
  height: 100%;
  width: 100%;
  position: absolute;
}

section#sec1 {
  top: 0;
  background: blue;
}

section#sec2 {
  top: 100%;
  background: red;
}

section#sec3 {
  top: 200%;
  background: lightseagreen;
}

.crr {
  background: pink !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="sec1" data-prev="" data-next="sec2"></section>
<section id="sec2" data-prev="sec1" data-next="sec3"></section>
<section id="sec3" data-prev="sec2" data-next=""></section>

Run code Hide result

+4

jquery html css

Enrico tenca Aug 17 '17 at 13:10

source share

1 answer

randomguy04 · Accepted Answer · 2017-08-17T16:29:55+0000

I used a different approach to achieve animated scrolling, see live working fiddle

wheel scroll, , , , ? wheel , , .
. data-prev="sec1" data-next="sec2" , . window.height, , , $(document).scrollTop(), , , .

HTML-:

<body>
  <section id="sec1"></section>
  <section id="sec2"></section>
  <section id="sec3"></section>
  <section id="sec4"></section>
  <section id="sec5"></section>
</body>

javascript:

$(function() {
    var isScrolling = false;
  $(window).on('wheel', function(e) {
    if (!isScrolling){
    isScrolling = true;

      var howFarFromTop = $(document).scrollTop(); //how far from the top have we scrolled?
      var currentWindowHeight = $( window ).height(); //current window height for responsiveness
      var delta = e.originalEvent.deltaY; // just to know if it is scroll wheel up or down
      //find out what is our offset from the top so we can now how far do we have to scroll to  the next / previous element
      var currentSlide = Math.floor(howFarFromTop / currentWindowHeight); //approximate which slide is on screen at the moment

      if (delta > 0){
        //scroll down
        smoothScroll(currentWindowHeight * (currentSlide + 1));
      }
      else {
        //scroll up
        smoothScroll(currentWindowHeight * (currentSlide -1));
      } 
      setTimeout(function(){isScrolling = false}, 400)
    }


    return false; // don't let the browser do the default scroll 
  });
});

function smoothScroll(offsetPixels){
    if (offsetPixels < 0){ //avoid negative numbers on the scroll up
    offsetPixels = 0;   
  }

  //this function is just to make an animated scrolling transition
  $('html, body').animate({
    scrollTop: offsetPixels
  }, 300);
}

Animate the next page instead of scrolling

More articles: