Scroll snapping to a page section

Question

So I have two sections of content near the top of my page and I’d like for users who have scrolled down to near the top of the second section to get “scroll snapped” to the top of the second one once they have stopped scrolling.

I think it should be possible using jQuery but I haven’t been able to figure it out. Here are my examples:

• Without my attempt: http://codepen.io/jifarris/pen/gaVgBp
• With my broken attempt: http://codepen.io/jifarris/pen/gaVgQp

Basically I can’t figure out how to make it try scrolling to the spot only once, after scrolling has stopped. It’s kind of just freaking out.

I love how the recently introduced scroll snap points CSS feature handles scroll snapping and I’d almost prefer to use it – for the browsers that support it, at least – but it seems like it only works for items that take up 100% of the viewport height or width, and it seems like it’s for scrolling within an element, not the page itself.

The top section has a fixed height, so this really can be handled with pixel numbers.

---

And for reference, here’s the heart of the code from my attempt:

$(function() {
  $(document).on('scroll', function() {
    var top = $(document).scrollTop();
    if (top > 255 && top < 455) {
      $('html, body').animate({scrollTop: '356'}, 500);
      $('body').addClass('hotzone');
    } else {
      $('body').removeClass('hotzone');
    }
  });
});

Answer 1

KQI's answer contains most of the steps required to create a well functioning section-scroll for use in your application/webpage.

However, if you'd just want to experiment yourself, developing your script further, the first thing you'll have to do is add a timeout handler. Otherwise your logic, and therefor scrollAnimation, will trigger every single pixel scrolled and create a buggy bouncing effect.

I have provided a working example based on your script here: http://codepen.io/anon/pen/QjepRZ?editors=001

$(function() {
  var timeout;
  $(document).on('scroll', function() {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      var top = $(document).scrollTop();
      if (top > 255 && top < 455) {
        $('body').animate({
          scrollTop: '356'
        }, 500);
        $('body').addClass('hotzone');
      } else {
        $('body').removeClass('hotzone');
      }
    }, 50);

  });
});

Good luck!

Answer 2

All right, there are couple of things you gonna have to deal with to get a good result: which are performance, call stack queue, easing.

Performance wise you should drop jQuery animate and use VelocityJs which gives a smoother transition, better frame per second (fps) to avoid screen glitches especially on mobiles.

Call stack: you should wrap whatever logic you have to animate the scrolltop with 'debounce' function, set the delay for let say 500mm and check the scrolling behavior. Just so you know, the 'scroll' listener your using is firing on each pixel change and your script will go crazy and erratic. (It is just gonna be a moment of so many calc at the same time. Debounce will fix that for you)

Easing: make the transition looks cool not just dry snappy movement.

Remember, 'easing' with Velocity starts with 'mina.' i.e.

'Mina.easingFnName'

Finally, your logic could be right, i am in my phone now cannot debug it but try to simplify it and work with a single problem at once, be like i.e.

If ( top > 380 )  // debounce(...)