jQuery Full Page transition scroll

Question

so I want to implement a full page transition scroll with jQuery. I know that there are plugins for this, but I need a custom code in my case.

//new script
<script>

  $(document).ready(function(){
    // http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily

    // left: 37, up: 38, right: 39, down: 40,
    // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
    var keys = {37: 1, 38: 1, 39: 1, 40: 1};

    function preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault)
          e.preventDefault();
      e.returnValue = false;
    }

    function preventDefaultForScrollKeys(e) {
        if (keys[e.keyCode]) {
            preventDefault(e);
            return false;
        }
    }

    function disableScroll() {
      if (window.addEventListener) // older FF
          window.addEventListener('DOMMouseScroll', preventDefault, false);
      window.onwheel = preventDefault; // modern standard
      window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
      window.ontouchmove  = preventDefault; // mobile
      document.onkeydown  = preventDefaultForScrollKeys;
    }

    function enableScroll() {
        if (window.removeEventListener)
            window.removeEventListener('DOMMouseScroll', preventDefault, false);
        window.onmousewheel = document.onmousewheel = null;
        window.onwheel = null;
        window.ontouchmove = null;
        document.onkeydown = null;
    }



        /*  $(window).scroll(function(){

        }); */

              var lastScrollTop = 0;
  $(window).scroll(function(event){
     var st = $(this).scrollTop();

     if (st > lastScrollTop){
         // downscroll code
         console.log('down');
         if (($(this).scrollTop() >940) && ($(this).scrollTop() <1000)){
         disableScroll();
          $('html, body').animate({ scrollTop: $(".bg1").offset().top}, 2000);
          enableScroll();
         }

         if ($(this).scrollTop() >1548){
              disableScroll();
           $('html, body').animate({ scrollTop: $(".bg2").offset().top}, 2000);
               enableScroll();
            }
     } else {
        // upscroll code
        console.log('up');
      /*  if ($(this).scrollTop() >1548){
           disableScroll();
        $('html, body').animate({ scrollTop: $(".bg").offset().top}, 2000);
            enableScroll();
         } */
     }
     lastScrollTop = st;
  });


  }); //document.ready

</script>

So this is my script. It checks whether the scroll is up or down, then starting on the specified pixels it starts transitioning. The beginning is happening very well.The first transition is happening. However after that no matter if I scroll up or down it always transits back to the position of bg1. If I scroll very intensely sometimes the scrolling to the bg2 happens. What is the problem of my code?

its always better to rely on mousewheel events than scroll – RRR Mar 21 '16 at 09:45 — RRR, Mar 21 '16 at 09:45

score 0 · Answer 1 · answered Mar 21 '16 at 11:33

Here is a working code with comments in it and the sources I used.

  //$(document).ready(function(){ //disables all the scrolling
  //  $('body,html').css('overflow', 'hidden');
 //  });
  // http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily
  // left: 37, up: 38, right: 39, down: 40,
  // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
  var keys = {37: 1, 38: 1, 39: 1, 40: 1};

  function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault)
        e.preventDefault();
    e.returnValue = false;
  }

  function preventDefaultForScrollKeys(e) {
      if (keys[e.keyCode]) {
          preventDefault(e);
          return false;
      }
  }

  function disableScroll() {
    if (window.addEventListener) // older FF
        window.addEventListener('DOMMouseScroll', preventDefault, false);
    window.onwheel = preventDefault; // modern standard
    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
    window.ontouchmove  = preventDefault; // mobile
    document.onkeydown  = preventDefaultForScrollKeys;
  }

  function enableScroll() {
      if (window.removeEventListener)
          window.removeEventListener('DOMMouseScroll', preventDefault, false);
      window.onmousewheel = document.onmousewheel = null;
      window.onwheel = null;
      window.ontouchmove = null;
      document.onkeydown = null;
  }


//http://stackoverflow.com/questions/33838956/jquery-full-page-scroll-without-plugin

  var currentLocation = 'firstPage';
  // No need to set these inside the event listener since they are always the same.
  var firstHeight = $('#firstPage').offset().top,
      secondHeight = $('#secondPage').offset().top,
      thirdHeight = $('#thirdPage').offset().top,
      fourthHeight = $('#fourthPage').offset().top,
      fifthHeight = $('#fifthPage').offset().top,
      sixthHeight = $('#sixthPage').offset().top,
      seventhHeight = $('#seventhPage').offset().top,
      eightHeight = $('#eightPage').offset().top,
      ninthHeight = $('#ninthPage').offset().top;
  // Helper so we can check if the scroll is triggered by user or by animation.
  var autoScrolling = false;

  $(document).scroll(function(e){
      var scrolled = $(window).scrollTop();

      // Only check if the user scrolled
      if (!autoScrolling) {
        if (scrolled > 1 && currentLocation == 'firstPage') {
              scrollPage(secondHeight, 'secondPage');
          }
          else if (scrolled > secondHeight + 1 && currentLocation == 'secondPage') {
              scrollPage(thirdHeight, 'thirdPage');
          }
          else if (scrolled > thirdHeight + 1 && currentLocation == 'thirdPage') {
              scrollPage(fourthHeight, 'fourthPage');
          }
          else if (scrolled > fourthHeight + 1 && currentLocation == 'fourthPage') {
              scrollPage(fifthHeight, 'fifthPage');
          }
          else if (scrolled > fifthHeight + 1 && currentLocation == 'fifthPage') {
              scrollPage(sixthHeight, 'sixthPage');
          }
          else if (scrolled > sixthHeight + 1 && currentLocation == 'sixthPage') {
              scrollPage(seventhHeight, 'seventhPage');
          }
          else if (scrolled > seventhHeight + 1 && currentLocation == 'seventhPage') {
              scrollPage(eightHeight, 'eightPage');
          }
          else if (scrolled > eightHeight + 1 && currentLocation == 'eightPage') {
              scrollPage(ninthHeight, 'ninthPage');
          }
          else if (scrolled < ninthHeight - 1 && currentLocation == 'ninthPage') {
              scrollPage(eightHeight, 'eightPage');
          }
          else if (scrolled < eightHeight - 1 && currentLocation == 'eightPage') {
              scrollPage(seventhHeight, 'seventhPage');
          }
          else if (scrolled < seventhHeight - 1 && currentLocation == 'seventhPage') {
              scrollPage(sixthHeight, 'sixthPage');
          }
          else if (scrolled < sixthHeight - 1 && currentLocation == 'sixthPage') {
              scrollPage(fifthHeight, 'fifthPage');
          }
          else if (scrolled < fifthHeight - 1 && currentLocation == 'fifthPage') {
              scrollPage(fourthHeight, 'fourthPage');
          }
          else if (scrolled < fourthHeight - 1 && currentLocation == 'fourthPage') {
              scrollPage(thirdHeight, 'thirdPage');
          }
          else if (scrolled < thirdHeight - 1 && currentLocation == 'thirdPage') {
              scrollPage(secondHeight, 'secondPage');
          }
          else if (scrolled < secondHeight - 1 && currentLocation == 'secondPage') {
              scrollPage(firstHeight, 'firstPage');
          }
      }//autoScrolling IF

      // Since they all have the same animation, you can avoid repetition
      function scrollPage(nextHeight, page) {
        currentLocation = page;

        // At this point, the page will start scrolling by the animation
        // So we switch this var so the listener does not trigger all the if/else
        autoScrolling = true;
        disableScroll();
        $('body,html').animate({scrollTop:nextHeight}, 500, function () {
            // Once the animation is over, we can reset the helper.
            // Now it is back to detecting user scroll.
            autoScrolling = false;
            enableScroll();
        });
      }

    //$('h1').html(scrolled);
    //$('h1').append("/" + secondHeight);
    //$('h1').append("/" + thirdHeight);
  })//document.ready

jQuery Full Page transition scroll

1 Answers1