javascript 使用 jQuery 滚动到一个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4217962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll to an element using jQuery
提问by cambraca
I need the page to scroll just so that an element is visible.
我需要页面滚动以便元素可见。
Options I've tried:
我试过的选项：
jQuery's
scrollTo: the problem is that the page scrolls so that the element is on top (or at least it tries to do that, much like how this works:<a name="xyz">/<a href="#xyz">). What I want is the minimum amount of scrolling so that the entire element is visible (and, if the element is too tall, work like the anchor there).scrollIntoView: awful, I want it to scroll smoothly (like$.scrollTo($('#id1'), 'fast');). Also, it doesn't seem to do what I want either.
jQuery 的
scrollTo：问题在于页面滚动以便元素位于顶部（或者至少它尝试这样做，就像它的工作原理：<a name="xyz">/<a href="#xyz">）。我想要的是最小的滚动量，以便整个元素都可见（并且，如果元素太高，像那里的锚一样工作）。scrollIntoView: 太糟糕了，我希望它平滑滚动（如$.scrollTo($('#id1'), 'fast');）。此外，它似乎也没有做我想要的。
回答by Orbling
What you need to do is identify the position within the page of the element, top and bottom (and left/right if you are considering horizontal scrolling). Then identify the current position of the viewport on the window, the scrollTop of the window should then be animated to whatever value will bring the other just in to view.
您需要做的是确定元素在页面内的位置，顶部和底部（如果您正在考虑水平滚动，则为左/右）。然后确定视口在窗口上的当前位置，然后窗口的 scrollTop 应该被动画化为任何值，这将使另一个刚刚进入查看。
I just knocked up the following in this editor, so it's untested, but will give you the general idea for a plugin.
我刚刚在这个编辑器中敲出了以下内容，所以它未经测试，但会给你一个插件的总体思路。
Updated- to show version that worked for the OP, as well as a smoother version
更新- 显示适用于 OP 的版本，以及更流畅的版本
jQuery.fn.scrollMinimal = function(smooth) {
var cTop = this.offset().top;
var cHeight = this.outerHeight(true);
var windowTop = $(window).scrollTop();
var visibleHeight = $(window).height();
if (cTop < windowTop) {
if (smooth) {
$('body').animate({'scrollTop': cTop}, 'slow', 'swing');
} else {
$(window).scrollTop(cTop);
}
} else if (cTop + cHeight > windowTop + visibleHeight) {
if (smooth) {
$('body').animate({'scrollTop': cTop - visibleHeight + cHeight}, 'slow', 'swing');
} else {
$(window).scrollTop(cTop - visibleHeight + cHeight);
}
}
};
$('#item').scrollMinimal();
回答by Robert Koritnik
There's a plugin for just what you need
有一个插件可以满足您的需求
I don't want to copy the code from blog post, because it can get outdated (due to upgrades). But anyway. You can find all details and code about the .scrollintoview()jQuery plugin on blog post.
我不想从博客文章中复制代码，因为它可能会过时（由于升级）。但无论如何。您可以.scrollintoview()在博客文章中找到有关jQuery 插件的所有详细信息和代码。
Usage
用法
Contrary to scrollTo()plugin where you have to provide scrollable element this plugin only requires you to provide the element you'd like to scroll into view. Plugin finds nearest scrollable ancestor (with scrollbars) and scrolls to the element with animation, so user doesn't loose track of their position in the page.
与scrollTo()您必须提供可滚动元素的插件相反，该插件只需要您提供您想要滚动到视图中的元素。插件找到最近的可滚动祖先（带有滚动条）并滚动到带有动画的元素，因此用户不会丢失他们在页面中的位置。
The good thing is also that it won't scroll anything if element is already within visible boundaries of scrollable ancestor.
好消息是，如果元素已经在可滚动祖先的可见边界内，它就不会滚动任何东西。
$("ElementSelector").scrollintoview();
That's it most of the time. But if you need to set some additional settings, there are some you can change and provide custom behaviour:
大多数时候都是这样。但是如果你需要设置一些额外的设置，你可以更改一些设置并提供自定义行为：
scrollintoview: function (options) {
/// <summary>Scrolls the first element in the set into view by scrolling its closest scrollable parent.</summary>
/// <param name="options" type="Object">Additional options that can configure scrolling:
/// duration (default: "fast") - jQuery animation speed (can be a duration string or number of milliseconds)
/// direction (default: "both") - select possible scrollings ("vertical" or "y", "horizontal" or "x", "both")
/// complete (default: none) - a function to call when scrolling completes (called in context of the DOM element being scrolled)
/// </param>
/// <return type="jQuery">Returns the same jQuery set that this function was run on.</return>
回答by Teguh Nurcahyo
FYI, jquery scrolling element into viewport plugins alternative:
仅供参考，jquery 滚动元素到视口插件替代：
