javascript - div 中的 scrollTop 不起作用

Question

我有一段久经考验的代码，对我来说一直运行良好，但我正在用它尝试一些新的东西。我没有使用 body 的滚动位置，而是有一个 ID 为 #main 的 div，它有 auto 溢出。

我遇到的问题是，当您单击页面链接(从 #main div 内部或外部)时，页面会移动但不会移动到正确的位置。可能导致此问题的原因

$('.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。如果您一直点击同一个链接，每次点击时页面都会上下移动。

Answer 1

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