如何使用jQuery滚动到页面上的特定位置?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (56)

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

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

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

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

提问于
用户回答回答于

是的,即使是在简单的JavaScript中,这也很容易。给元素一个id,然后将其用作“书签”:

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

如果希望当用户单击链接时它在那里滚动,则只需使用“尝试”和“真”方法:

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

若要以编程方式执行此操作。

document.getElementById("here").scrollIntoView()
用户回答回答于

jQuery Scroll插件

因为这是一个带有标记的问题jQuery我不得不说,这个库有一个非常好的插件,可以平滑滚动。

文件摘录:

$('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();

滚动到页面坐标

有生命的htmlbody元素scrollTopscrollLeft属性

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

纯javascript

滚动window.scroll

window.scroll(horizontalOffset, verticalOffset);

只有总结一下,使用window.location.hash跳到ID为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>

扫码关注云+社区