[anondesign]

Eh, updating page at end/cancel easy enough. I use this approach to animate a page scroll:

1. Animate #transform using jquery's animate (which doesn't work out of the box unfortunately, you have to use a custom #step fn)

2. Install "capture" event handlers on document.body that will cancel the animation, reset scrollTop to the state of the transform, then reset the #translate to 0 on #scroll or #touch (so we don't "fight" the user scrolling)

3. .. animation runs, calls my "complete" callback which uninstalls the event handlers, sets #translate back to 0, and updates scrollTop. Unfortunately there is a noticeable "glitch" here if the user tries to immediately further interact with the page.

#2 is optional (OP's implementation didn't handle canceling anyways). I'm sure there's a jquery plugin to do this and degrade to scrollTop on non-webkit browsers.

Edit: formatting.