Question

我需要滚动页面以便元素可见。

我尝试过的选项：

jQuery的scrollTo：问题在于页面滚动以便元素位于顶部（或者至少它尝试这样做，就像它的工作方式一样：<a name="xyz"> / { {1}}）。我想要的是最小滚动量，以便整个元素可见（如果元素太高，就像那里的锚一样）。
<a href="#xyz">：糟糕，我希望它能够顺畅滚动（例如scrollIntoView）。此外，它似乎也没有做我想要的。

Answer 1

您需要做的是确定元素页面中的位置，顶部和底部（如果您正在考虑水平滚动，则选择左/右）。然后在窗口上识别视口的当前位置，然后窗口的scrollTop应该被动画化为将使另一个刚刚进入视图的任何值。

我刚刚在这个编辑器中敲了下来，所以它没有经过测试，但会给你一个插件的一般想法。

更新 - 显示适用于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();

Answer 2

有一个插件可以满足您的需求

我不想从博客文章中复制代码，因为它可能会过时（由于升级）。但无论如何。您可以在blog post上找到有关.scrollintoview() jQuery插件的所有详细信息和代码。

用法

与必须提供可滚动元素的scrollTo()插件相反，此插件只需要您提供要滚动到视图中的元素。插件找到最近的可滚动祖先（带有滚动条）并滚动到带有动画的元素，因此用户不会在页面中忽略它们的位置。

好处还在于，如果元素已经在可滚动祖先的可见边界内，它将不会滚动任何内容。

 $("ElementSelector").scrollintoview();

大部分时间都是这样。但是，如果您需要设置一些其他设置，您可以更改并提供自定义行为：

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>

Answer 3

仅供参考，jquery滚动元素到viewport插件替代：

使用jQuery滚动到一个元素

3 个答案:

有一个插件可以满足您的需求

用法