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

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($)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$.fn.goTo&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('html,&nbsp;body').animate({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scrollTop:&nbsp;$(this).offset().top&nbsp;+&nbsp;'px' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;'fast'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this;&nbsp;//&nbsp;for&nbsp;chaining... &nbsp;&nbsp;&nbsp;&nbsp;}})(jQuery);然后你可以说$('#div_element2').goTo();滚动到<div id="div_element2">。选项处理和可配置性留给读者练习。

Answer 2

如果元素当前在页面上不可见，则可以使用本机scrollIntoView()方法。$('#div_'&nbsp;+&nbsp;element_id)[0].scrollIntoView(&nbsp;true&nbsp;);其中的true意思是与页面顶部对齐，并false与底部对齐。否则，有一个scrollTo()插件的jQuery就可以使用。或者只是得到top&nbsp;position()（文档）的元素，并设置scrollTop()（文档）到该位置：var&nbsp;top&nbsp;=&nbsp;$('#div_'&nbsp;+&nbsp;element_id).position().top;$(window).scrollTop(&nbsp;top&nbsp;);