Выделите элемент, используя jQuery

Мне нужна страница для прокрутки только для того, чтобы элемент был виден.

Параметры, которые я пробовал:

  • jQuery scrollTo: проблема в том, что страница прокручивается так, что элемент находится сверху (или, по крайней мере, пытается это сделать, как это работает: <a name="xyz">/<a href="#xyz">). То, что я хочу, - это минимальное количество прокрутки, чтобы весь элемент был виден (и, если элемент слишком высок, работайте как якорь там).

  • scrollIntoView: ужасно, я хочу, чтобы он плавно прокручивался (например, $.scrollTo($('#id1'), 'fast');). Кроме того, он, похоже, не делает того, что я хочу.

Ответы

Ответ 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();

Ответ 2

Там есть плагин для того, что вам нужно

Я не хочу копировать код из сообщения в блоге, потому что он может устареть (из-за обновлений). Но в любом случае. Вы можете найти все подробности и код о плагине .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>