javascript div 中的 scrollTop 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19822231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
scrollTop in div not working
提问by egr103
I have a tried and tested bit of code that has always worked well for me but I'm trying something new with it. I'm not using the body's scroll position but instead I have a div with the ID of #mainthat has an overflow of auto.
我有一段久经考验的代码，这些代码一直对我有用，但我正在尝试一些新的东西。我没有使用身体的滚动位置，而是我有一个带有#main自动溢出的 ID 的 div 。
The problem I'm having is that when you click a page link (from either inside or outside the #maindiv) the page moves but not to the correct position. What could be causing this issue
我遇到的问题是，当您单击页面链接（从#maindiv内部或外部）时，页面会移动但不会移动到正确的位置。什么可能导致这个问题
$('.scrollto').click(function() {
var elementClicked = $(this).attr("href");
var destination = $(elementClicked).offset().top;
$("#main:not(:animated)").animate({ scrollTop: destination} );
return false;
});
Here's #main's CSS:
这#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;
}
EDIT
编辑
With a little bit of help from @Moje, I have recreated the issue here: http://codepen.io/anon/pen/xbLyJ
在@Moje 的帮助下，我在这里重新创建了这个问题：http://codepen.io/anon/pen/xbLyJ
Click the "Click me to go to Target 1" link. Within that section you'll see another link to go to Target 2. Click that and it won't fully go down to the correct ID. If you keep clicking that same link the page will go up and down each time you do it.
单击“单击我转到目标 1”链接。在该部分中，您将看到另一个指向 Target 2 的链接。单击该链接，它不会完全转到正确的 ID。如果您一直单击同一个链接，则每次单击时页面都会上下移动。
回答by egasato
I saw your codepen example and I noticed an error. The error is that you didn't add the actual scroll value. A simple example is that when you click and the scrollTop value is 0, it works fine, but when the scrollTop value is not 0 the destinationvalue is not the same as the destinationvalue when the scroll is 0.
You can see the forked example here.
Also, I recommend you to use event.preventDefault()instead of return false;, to avoid the haschange or the URL redirecting.
我看到了你的 codepen 示例，我注意到一个错误。错误是您没有添加实际的滚动值。一个简单的例子是，当你点击并且scrollTop值为0时，它工作正常，但是当scrollTop值不为0时destination，该destination值与scroll为0时的值不同。你可以在这里看到分叉的例子。另外，我建议您使用event.preventDefault()代替return false;, 以避免 haschange 或 URL 重定向。
回答by mrmoje
Seems to work for me. Codepen -> http://codepen.io/mrmoje/pen/waBls
似乎对我有用。Codepen -> http://codepen.io/mrmoje/pen/waBls
EDIT:
编辑：
I edited my pen with your example & saw what you meant. (I also renamed some vars to reflect their true purpose)
So...., after logging the resulting scrolltopvalues in animate's callback, I found that #main's true target scrollTop value should be that of the target element's offset().top+ the current (or pre-scroll) $(#main').scrollTop().
我用你的例子编辑了我的笔，看到了你的意思。（我还重命名了一些变量以反映它们的真正目的）
所以....，scrolltop在 animate 的回调中记录结果值后，我发现#main真正的目标 scrollTop 值应该是目标元素的offset().top+ 当前（或预滚动）$(#main').scrollTop()。
Checkout the updated pento see what I mean.
查看更新的笔以了解我的意思。
