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

Question

如何转到页面上的特定元素？在我的HTML页面上，我希望能够“转到”/“滚动到”/“关注”页面上的元素。通常情况下，我会使用带有a的锚标记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>

Answer 1

插件形式的标准技术看起来像这样：

(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">。选项处理和可配置性留给读者练习。

Answer 2

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

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

其中的true意思是与页面顶部对齐，并false与底部对齐。

否则，有一个scrollTo()插件的jQuery就可以使用。

或者只是得到top position()^（文档）的元素，并设置scrollTop()^（文档）到该位置：

var top = $('#div_' + element_id).position().top;$(window).scrollTop( top );