如何使用jquery滚动到页面上的特定位置? [英] How can I scroll to a specific location on the page using jquery?

问题描述

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

Is it possible to scroll to a specific location on the page using jQuery?

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

Does the location I want to scroll to have to have:

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

还是可以仅移至特定的DOM ID?

Or can it just move to a specific DOM id?

推荐答案

jQuery Scroll Plugin

由于这是一个用 jquery 标记的问题，我不得不说，该库有一个非常不错的插件，可以平滑滚动，因此可以在这里找到: http://plugins.jquery.com/scrollTo/

since this is a question tagged with jquery i have to say, that this library has a very nice plugin for smooth scrolling, you can find it here: http://plugins.jquery.com/scrollTo/

文档摘录:

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

或

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

用于滚动的自定义jQuery函数

您可以通过定义自定义滚动jquery函数

you can use a very lightweight approach by defining your custom scroll jquery function

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

并像这样使用它:

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

滚动到页面坐标

使用scrollTop或scrollLeft属性为html和body元素设置动画

Animate html and body elements with scrollTop or scrollLeft attributes

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

普通javascript

使用window.scroll

window.scroll(horizontalOffset, verticalOffset);

仅作总结，请使用window.location.hash跳转到ID为ID的元素

only to sum up, use the window.location.hash to jump to element with 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>

这篇关于如何使用jquery滚动到页面上的特定位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！