jQuery 如何将可滚动 div 内的项目滚动到顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5846595/
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
How to scroll an item inside a scrollable div to the top
提问by AnApprentice
I have a #contact-list-scroller div that scrolls in the page. Based on a contact_XXXX ID I'd like the #contact-list-scroller scroll position to bet set to make sure the contact_XXX item is at the top of the page.
我有一个在页面中滚动的 #contact-list-scroller div。根据contact_XXXX ID，我希望设置#contact-list-scroller 滚动位置以确保contact_XXX 项目位于页面顶部。
<div id="contact-list-scroller">
<div id="contact_8965">stuff</div>
<div id="contact_8966">stuff</div>
<div id="contact_8967">stuff</div>
<div id="contact_8968">stuff</div>
<div id="contact_8969">stuff</div>
.....
</div>
Here's what I have so far:
这是我到目前为止所拥有的：
$('#contact-list-scroller').scrollTop($('#contact_' + id).scrollTop());
But that is just scrolling to the top. Ideas? Thanks
但这只是滚动到顶部。想法？谢谢
回答by Richard
I think you'll need position().top. Because the values returned by position() are relative to its parent (unlike offset()), it makes your code more flexible. If you change the position of your parent container your code won't break.
我认为你需要position().top。因为 position() 返回的值是相对于其父级的（与 offset() 不同），所以它使您的代码更加灵活。如果您更改父容器的位置，您的代码不会中断。
Example:
例子：
var contactTopPosition = $("#contact_8967").position().top;
$("#contact-list-scroller").scrollTop(contactTopPosition);
or animated:
或动画：
$("#contact-list-scroller").animate({scrollTop: contactTopPosition});
See jsfiddle: http://jsfiddle.net/5zf9s/
见jsfiddle：http: //jsfiddle.net/5zf9s/
回答by Kedar.Aitawdekar
Even I was having same situation and wanted to scroll element to top. Now, there is direct support for this behavior.
即使我遇到了同样的情况，也想将元素滚动到顶部。现在，这种行为得到了直接的支持。
Just use <element>.scrollIntoView(true)JavaScript method.
只需使用<element>.scrollIntoView(true)JavaScript 方法。
Example:
例子：
document.getElementById("yourElementId").scrollIntoView(true);
document.getElementById("yourElementId").scrollIntoView(true);
More Info:
更多信息：
Although this is experimental now, soon will get support in every browser. You could find more info on this at : MDN
虽然现在这是实验性的，但很快就会在每个浏览器中获得支持。您可以在以下位置找到更多信息：MDN
回答by ivan
After trying all of the above with no success I found this at W3schools:
在尝试了上述所有方法但没有成功后，我在 W3schools 发现了这个：
var elmnt = document.getElementById("Top");
elmnt.scrollIntoView();回答by alex
回答by akhaku
Take a look at the jquery scrollTo plugin - you can use it to scroll to a specific DOM element http://flesler.blogspot.com/2007/10/jqueryscrollto.html
看看 jquery scrollTo 插件 - 您可以使用它滚动到特定的 DOM 元素 http://flesler.blogspot.com/2007/10/jqueryscrollto.html
