0

我有一段久经考验的代码，它一直对我很有效，但我正在尝试一些新的东西。我没有使用主体的滚动位置，而是有一个 div，其 ID#main具有 auto 溢出。

我遇到的问题是，当您单击页面链接（从#maindiv 内部或外部）时，页面会移动但不会移动到正确的位置。什么可能导致此问题

$('.scrollto').click(function() {
       var elementClicked = $(this).attr("href");
       var destination = $(elementClicked).offset().top;
       $("#main:not(:animated)").animate({ scrollTop: destination} );
       return false;
});

这#main是CSS：

#main { 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  z-index: 2;
  overflow: auto;
  overflow-x: hidden;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

编辑

在@Moje 的一点帮助下，我在这里重新创建了这个问题：http: //codepen.io/anon/pen/xbLyJ

单击“单击我以转到目标 1”链接。在该部分中，您将看到另一个指向目标 2 的链接。单击该链接，它不会完全转到正确的 ID。如果您继续单击相同的链接，则每次执行此操作时页面都会上下移动。

4

2 回答 2

3

我看到了你的 codepen 示例，我注意到一个错误。错误是您没有添加实际的滚动值。一个简单的例子是当你点击并且 scrollTop 值为 0 时，它工作正常，但是当 scrollTop 值不为 0时destination，该destination值与滚动为 0 时的值不同。你可以在这里查看 fork 示例。另外，我建议您使用event.preventDefault()而不是return false;, 以避免 haschange 或 URL 重定向。

于 2013-11-06T22:06:54.700 回答
2

似乎对我有用。Codepen -> http://codepen.io/mrmoje/pen/waBls

编辑：

我用你的例子编辑了我的笔，明白了你的意思。（我还重命名了一些变量以反映它们的真实目的）
所以....，scrolltop在 animate 的回调中记录结果值后，我发现#main真正的目标 scrollTop 值应该是目标元素的offset().top+ 当前（或 pre-滚动）$(#main').scrollTop()。

查看更新的笔以了解我的意思。

于 2013-11-06T20:58:55.490 回答