jQuery How to scrollTo when scrolling manually at a certain position?

Question

How do I automatically .scrollTo() (using a plugin) when scrolling manually between two y positions? (if() statement inside .scroll())

The code I have below, seems pretty straightforward. However, the scrolling is a bit bumpy and when it has scrolled automatically to the content, the scrolling is stuck there. As if it wants to do two things.

scrollToContent = function() {
    $(document).stop(1, 1).scrollTo($('.content'), 750, { easing: 'easeInOutQuint' });
}

$(window).scroll(function() {
    if ($(this).scrollTop() <= $(this).height()) {
        scrollToContent();
    }
});

It looks like it's trying to do 2 things because it _is_ trying to do 2 things. It's trying to automatically scroll while the user is also scrolling. And every time the user scrolls, the animation is stopped and started again. Sounds like you might want to [disable user scroll](http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily) while the scrolling is happening automatically. — Christian, Dec 23 '12 at 11:05
I tried that, but how can I check if the user is scrolling? Other than `$(window).scroll()` ? Because with that, I get the same result. — fishbaitfood, Dec 23 '12 at 14:12

score 2 · Accepted Answer · answered Dec 23 '12 at 17:43

This it too long for a comment, so I'm placing it as an answer instead. $(window).scroll() is the method you want to use to check if the user is scrolling. If that messes with the scrollTo() plugin, try setting flags. Eg:

var scrolling = false;

scrollToContent = function() {
  scrolling = true;

  // disable user scroll here

  $(document).stop(1, 1).scrollTo($('.content'), 750, { easing: 'easeInOutQuint', onAfter: function() {
    scrolling = false;

    // reenable user scroll here
  }});
}

$(window).scroll(function() {
  if ($(this).scrollTop() <= $(this).height() && !scrolling) {
    scrollToContent();
  }
});

jQuery How to scrollTo when scrolling manually at a certain position?

1 Answers1