Javascript 如何转到页面上的特定元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4801655/
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 go to a specific element on page?
提问by Cuga
On my HTML page, I want to be able to 'go to' / 'scroll to' / 'focus on' an element on the page.
在我的 HTML 页面上，我希望能够“转到”/“滚动到”/“关注”页面上的某个元素。
Normally, I'd use an anchor tag with a href="#something", but I'm already using the hashchange event along with the BBQ pluginto load this page.
通常，我会使用带有 的锚标记href="#something"，但我已经在使用 hashchange 事件和BBQ 插件来加载此页面。
So is there any other way, via JavaScript, to have the page go to a given element on the page?
那么有没有其他方法可以通过 JavaScript 使页面转到页面上的给定元素？
Here's the basic outline of what I'm trying to do:
这是我正在尝试做的基本大纲：
function focusOnElement(element_id) {
$('#div_' + element_id).goTo(); // need to 'go to' this element
}
<div id="div_element1">
yadda yadda
</div>
<div id="div_element2">
blah blah
</div>
<span onclick="focusOnElement('element1');">Click here to go to element 1</span>
<span onclick="focusOnElement('element2');">Click here to go to element 2</span>
回答by user113716
If the element is currently not visible on the page, you can use the native scrollIntoView()method.
如果该元素当前在页面上不可见，则可以使用本机scrollIntoView()方法。
$('#div_' + element_id)[0].scrollIntoView( true );
Where truemeans align to the top of the page, and falseis align to bottom.
其中，true表示与页面顶部false对齐，与底部对齐。
Otherwise, there's a scrollTo()pluginfor jQuery you can use.
否则，有一个scrollTo()插件的jQuery就可以使用。
Or maybe just get the topposition()(docs)of the element, and set the scrollTop()(docs)to that position:
或者只是得到topposition()（文档）的元素，并设置scrollTop()（文档）到该位置：
var top = $('#div_' + element_id).position().top;
$(window).scrollTop( top );
回答by mu is too short
The standard technique in plugin form would look something like this:
插件形式的标准技术如下所示：
(function($) {
$.fn.goTo = function() {
$('html, body').animate({
scrollTop: $(this).offset().top + 'px'
}, 'fast');
return this; // for chaining...
}
})(jQuery);
Then you could just say $('#div_element2').goTo();to scroll to <div id="div_element2">. Options handling and configurability is left as an exercise for the reader.
然后你可以说$('#div_element2').goTo();滚动到<div id="div_element2">. 选项处理和可配置性留给读者作为练习。
回答by GlennG
document.getElementById("elementID").scrollIntoView();
Same thing, but wrapping it in a function:
同样的事情，但将它包装在一个函数中：
function scrollIntoView(eleID) {
var e = document.getElementById(eleID);
if (!!e && e.scrollIntoView) {
e.scrollIntoView();
}
}
This even works in an IFrame on an iPhone.
这甚至适用于 iPhone 上的 IFrame。
Example of using getElementById: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementbyid
使用 getElementById 的示例：http: //www.w3schools.com/jsref/tryit.asp?filename =tryjsref_document_getelementbyid
回答by AnhSirk Dasarp
here is a simple javascript for that
这是一个简单的javascript
call this when you need to scroll the screen to an element which has id="yourSpecificElementId"
当您需要将屏幕滚动到具有 id="yourSpecificElementId" 的元素时调用此方法
window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));
and you need this function for the working:
你需要这个功能来工作：
//Finds y value of given object
function findPos(obj) {
var curtop = 0;
if (obj.offsetParent) {
do {
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curtop];
}
}
the screen will be scrolled to your specific element.
屏幕将滚动到您的特定元素。
回答by lorddarq
To scroll to a specific element on your page, you can add a function into your jQuery(document).ready(function($){...})as follows:
要滚动到页面上的特定元素，您可以jQuery(document).ready(function($){...})按如下方式添加一个函数：
$("#fromTHIS").click(function () {
$("html, body").animate({ scrollTop: $("#toTHIS").offset().top }, 500);
return true;
});
It works like a charm in all browsers. Adjust the speed according to your need.
它在所有浏览器中都具有魅力。根据您的需要调整速度。
