如何使用 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(horizontalOffset, 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屋!