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

Question

在我的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>

Answer 1

插件形式的标准技术如下所示：

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

然后，您可以说$('#div_element2').goTo();滚动到<divid="div_element2">。选件处理和可配置性留给读者练习。