1

On clicking a link I'm using ajax to refresh the contents of a div, and then using scrollTop to move to the top of the content. The problem is, for a second or two after the animation, if you try to scroll down, the page scrolls back up. The only way to get around it is with a fast animation, but I want to keep it a little bit slow so the user can see what is happening. It's like its still running the animation.

user1313815
  • 23
  • 4

1 Answers1

0

Try using serialScroll and scrollTo instead of the native jQuery scrolling for more advanced features. Flesler's scrollTo allows the user mouse scroll to interrupt the current action. You can see it the demo

Dylan Valade
  • 5,447
  • 5
  • 38
  • 56
  • I just cannot get this to work and it ends up breaking the ajax call. Will keep trying but surely there must be a way to break the jquery animation from happening, here is the code to call the scrolltop jQuery('html,body').animate({scrollTop: x}, 1000); – user1313815 Apr 22 '12 at 23:52
  • it looks like you're calling it twice since `html` and `body` would both exist in the DOM. I wonder if you're mouse scrolling on `body` while `html`'s `animate()` is still running. From a glance of the documentation discussion for `scrollTop` it looks like `$('html').` is the preferred selector. – Dylan Valade Apr 23 '12 at 00:34
  • The code I posted seems to be the typical example to use this, I have tried using just HTML or Body, but it doesn't seem to run, it's late for me and just back from the bar, will try some other ways tomorrow. – user1313815 Apr 23 '12 at 01:55
  • Using just HTML or Body gives the same results, the animation continues to run. But I've implemented the animation immediately after the ajax call is started, so it runs while the content is being retrieved instead of waiting and this works fine - and actually kinda works better. Not a proper solution but it works for me – user1313815 Apr 23 '12 at 12:50