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

问题描述

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

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

这里

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

解决方案

jQuery Scroll Plugin

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

文档摘录:

$('div.pane').scrollTo(...);//所有带有类窗格的div

或

$.scrollTo(...);//插件会处理这个

用于滚动的自定义 jQuery 函数

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

$.fn.scrollView = function () {返回 this.each(function () {$('html, body').animate({滚动顶部:$(this).offset().top}, 1000);});}

并像这样使用它:

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

滚动到页面坐标

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

$('html, body').animate({滚动顶部:0，向左滚动:300}, 1000);

普通 JavaScript

使用 window.scroll

滚动

window.scroll(horizo​​ntalOffset, verticalOffset);

总结一下，使用window.location.hash跳转到有ID的元素

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

直接在 HTML 中(可访问性增强)

<a href="#your-page-element">跳转到 ID</a><div id="你的页面元素">会跳到这里

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>

Or can it just move to a specific DOM id?

解决方案

jQuery Scroll Plugin

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/

Excerpts from Documentation:

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

or

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

Custom jQuery function for scrolling

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);
    });
}

and use it like:

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

Scroll to a page coordinates

Animate html and body elements with scrollTop or scrollLeft attributes

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

Plain javascript

scrolling with window.scroll

window.scroll(horizontalOffset, verticalOffset);

only to sum up, use the window.location.hash to jump to element with ID

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

Directly in HTML (accesibility enhancements)

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

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

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