javascript - 使用 jQuery 滚动到一个元素

Question

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

我尝试过的选项:

• jQuery 的 scrollTo : 问题是页面滚动使得元素位于顶部(或者至少它试图这样做，就像它的工作原理一样: <a name="xyz">/<a href="#xyz"> )。我想要最少的滚动量，以便整个元素可见(并且，如果元素太高，则像 anchor 一样工作)。

• scrollIntoView : 可怕。我希望它平滑滚动(如 $.scrollTo($('#id1'), 'fast'); )。而且，它似乎也没有达到我的要求。

Answer 1

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

我刚刚在这个编辑器中敲定了以下内容，因此未经测试，但会为您提供插件的总体思路。

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