scrollTo doesn't scroll to correct position

Question

I'm trying to use jQuery.scrollTo plugin with accordion (where one block expands after clicking on it and another contracts), but it doesn't scroll to the right position.

Here is a demo: pelmeshkin.com/temp/scrolltoaccoridon

As you can see, the first click scrolls correctly, but every next one goes further than it should.

It seems to use target's initial position (where it was before the expansion/contraction), which makes sense, since both events are initiated at the same time, but even when I try to pause scrollTo and wait until the slideUp/slideDown transition is over, it still behaves the same. :(

Answer 1

Ok, I sort of solved it myself. I first find positions of all clickable elements on pageload using offset(), put them in array, and then feed these as pixel values to scrollTo on click event.

This way we're giving scrollTo exact pixel positions to scroll to on the page, rather than relying on it to calculate it from element ID by itself. Here's how it looks in the end: pelmeshkin.com

Answer 2

Because it's calculating the position based on the location before the animation occurs. Not sure how you would go about dealing with this to be honest except maybe to tinker with the internal calculate which probably isn't a simple matter.

Answer 3

Dude. N.S.F.W.

And after a bit of hacking around on Effect.ScrollTo:

Effect.LazyScrollTo = function(element) { try {
  var options = arguments[1] || { };
  scrollOffsets = document.viewport.getScrollOffsets();
  elementOffsets = $(element).cumulativeOffset();

  if (options.offset) elementOffsets[1] += options.offset;

  return new Effect.Tween(null,
    scrollOffsets.top,
    elementOffsets[1],
    options,
    function(p){
      try {
        this.lazy_offset = this.lazy_offset || $(element).cumulativeOffset();
        scrollTo(scrollOffsets.left, (p.round() - (elementOffsets[1] - this.lazy_offset[1])));
      } catch(e) {
        alert(e);
      }
    }.bind(this)
  ); 
} catch(e) { alert(e); }}

And then elsewhere...

new Effect.SlideDown('tab1-body', {queue: 'end'});
new Effect.LazyScrollTo('tab1-heading', {queue: 'end'});

Happy new year.