使用jquery滚动到元素

您需要做的是确定元素页面中的位置,顶部和底部(如果您考虑水平滚动,则为左/右)。然后确定视窗上视窗的当前位置,然后视窗的滚动顶部将被设置为任何值,以使另一个刚好进入视窗。

我刚刚在这个编辑器中总结了以下内容,所以它还没有经过测试,但是会给你一个插件的一般概念。

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

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

我不想从博客文章中复制代码,因为它可能会过时(由于升级)。但无论如何。您可以找到有关 .scrollintoview() 上的jquery插件 blog post .

用法

与…相反 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>

仅供参考,jquery将元素滚动到viewport插件中替代:

• intoViewPort plugin
• scrollIntoView plugin