jquery - scrollTo 不滚动到正确的位置

Question

我正在尝试将 jQuery.scrollTo 插件与手风琴一起使用（其中一个块在单击它和另一个合同后展开），但它不会滚动到正确的位置。

这是一个演示：pelmeshkin.com/temp/scrolltoaccoridon

如您所见，第一次点击滚动正确，但每下一次点击都超出预期。

它似乎使用了目标的初始位置（在扩展/收缩之前的位置），这是有道理的，因为这两个事件是同时启动的，但即使我尝试暂停 scrollTo 并等到 slideUp/slideDown 过渡结束，它的行为仍然相同。:(

Answer 1

因为它是根据动画发生之前的位置来计算位置的。老实说，不知道你将如何处理这个问题，除非可能修补内部计算，这可能不是一件简单的事情。

Answer 2

好的，我自己解决了。我首先使用 offset() 找到页面加载上所有可点击元素的位置，将它们放入数组中，然后将它们作为像素值提供给 click 事件时的 scrollTo。

这样我们就可以在页面上为 scrollTo 提供精确的像素位置，而不是依靠它自己从元素 ID 计算它。这是它最终的样子：pelmeshkin.com

Answer 3

老兄。 NSFW

在对 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); }}

然后在别处...

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

新年快乐。