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

javascript jquery html

2022-08-30 02:23:00

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

通常，我会使用带有的锚点标签，但我已经使用 hashchange 事件以及 BBQ 插件来加载此页面。href="#something"

那么，有没有其他方法可以通过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>

答案 1

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

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

其中，means 与页面顶部对齐，并且与底部对齐。truefalse

否则，您可以使用jQuery的rollkTo（）插件。

或者，也许只是获取元素的位置（）^{（docs），}并将scrollTop（）^（docs）设置为该位置：top

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

答案 2

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

(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">