如何使用jquery滚动到页面上的特定位置？

Question

是否可以使用jQuery滚动到页面上的特定位置？

我想要滚动的位置是否必须具有:

<a name="#123">here</a>

或者它可以移动到特定的DOM ID？

Answer 1

jQuery Scroll插件

因为这是一个用jquery标记的问题,我必须说,这个库有一个非常好的插件,可以在这里找到它:http: //plugins.jquery.com/scrollTo/

文档摘录:

$('div.pane').scrollTo(...);//all divs w/class pane

要么

$.scrollTo(...);//the plugin will take care of this

用于滚动的自定义jQuery函数

您可以通过定义自定义滚动jquery函数来使用非常轻量级的方法

$.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
}

并使用它像:

$('#your-div').scrollView();

滚动到页面坐标

Animate html和body带有scrollTop或scrollLeft属性的元素

$('html, body').animate({
    scrollTop: 0,
    scrollLeft: 300
}, 1000);

简单的javascript

滚动 window.scroll

window.scroll(horizontalOffset, verticalOffset);

只是总结一下,使用window.location.hash跳转到带ID的元素

window.location.hash = '#your-page-element';

直接在HTML中(辅助功能增强)

<a href="#your-page-element">Jump to ID</a>

<div id="your-page-element">
    will jump here
</div>

Answer 2

是的,即使在普通的JavaScript中也很容易.您为元素提供了一个id,然后您可以将其用作"书签":

<div id="here">here</div>

如果您希望在用户单击链接时滚动它,您可以使用经过验证的方法:

<a href="#here">scroll to over there</a>

要以编程方式执行,请使用 scrollIntoView()

document.getElementById("here").scrollIntoView()

Answer 3

没有必要使用任何插件,你可以这样做:

var divPosition = $('#divId').offset();

然后使用它将文档滚动到特定的DOM:

$('html, body').animate({scrollTop: divPosition.top}, "slow");

Answer 4

这是一个纯粹的javascript版本:

location.hash = '#123';

它会自动滚动.请记住添加"#"前缀.

Answer 5

普通的Javascript:

window.location = "#elementId"

Answer 6

<div id="idVal">
    <!--div content goes here-->
</div>
...
<script type="text/javascript">
     $(document).ready(function(){
         var divLoc = $('#idVal').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
</script>

此示例显示定位到特定div id,即在这种情况下为'idVal'.如果您有后续的div /表将通过ajax在此页面中打开,那么您可以分配唯一的div并调用脚本滚动到div的每个内容的特定位置.

希望这会有用.