如何转到页面上的特定元素？

在我的 HTML 页面上，我希望能够“转到”/“滚动到”/“关注”页面上的一个元素。

通常，我会使用带有 href="#something"的锚标记，但是我已经在使用 hashchange 事件和 BBQ 插件来加载这个页面了。

那么有没有其他的方法，通过 JavaScript，让页面转到页面上的给定元素？

下面是我正在尝试做的事情的基本轮廓:

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>
281887 次浏览
小开

如果该元素当前在页上不可见，则可以使用本机 scrollIntoView()方法。

$('#div_' + element_id)[0].scrollIntoView( true );

其中 true表示对齐到页面的顶部，而 false表示对齐到底部。

否则，您可以使用针对 jQuery 的 scrollTo()插件。

或者只是得到元素的 top position() < sup > < i > (docs) ，并将 scrollTop() < sup > < i > (docs) 设置为该位置:

var top = $('#div_' + element_id).position().top;
$(window).scrollTop( top );
小开
最佳答案

插件形式的标准技术是这样的:

(function($) {
$.fn.goTo = function() {
$('html, body').animate({
scrollTop: $(this).offset().top + 'px'
}, 'fast');
return this; // for chaining...
}
})(jQuery);

然后你可以说 $('#div_element2').goTo();滚动到 <div id="div_element2">。选项处理和可配置性留给读者作为练习。

小开

要滚动到 页面上的特定元素，可以在 jQuery(document).ready(function($){...})中添加如下函数:

$("#fromTHIS").click(function () {
$("html, body").animate({ scrollTop: $("#toTHIS").offset().top }, 500);
return true;
});

它在所有浏览器中都很有用，可以根据需要调整速度。

小开 
document.getElementById("elementID").scrollIntoView();

同样的事情，但是把它包装成一个函数:

function scrollIntoView(eleID) {
var e = document.getElementById(eleID);
if (!!e && e.scrollIntoView) {
e.scrollIntoView();
}
}

这甚至可以在 iPhone 上的 IFrame 中使用。

使用 getElementById 的示例: Http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementbyid


提交答案