JavaScript. Подробное руководство, 6-е издание

  // Получить высоту документа и видимой области. Метод offsetHeight описывается ниже.
  var documentHeight = document.documentElement.offsetHeight;
  var viewportHeight = window.innerHeight; // Или использовать getViewportSize,
   // описанный выше
  // И прокрутить окно так, чтобы переместить последнюю "страницу" в видимую область
  window.scrollTo(0, documentHeight - viewportHeight);

Метод scrollBy объекта Window похож на методы scroll и scrollTo, но их аргументы определяют относительное смещение и добавляются к текущим позициям полос прокрутки. Тем, кто умеет быстро читать, мог бы понравиться следующий букмарклет (раздел 13.2.5.1):

  // Прокручивает документ на 10 пикселов каждые 200 мсек.
  // Учтите, что этот букмарклет нельзя отключить после запуска!
  JavaScript:void setInterval(function {scrollBy(0,10)}, 200);

Часто требуется прокрутить документ не до определенных числовых координат, а до элемента в документе, который нужно сделать его видимым. В этом случае можно определить координаты элемента с помощью метода getBoundingClientRect, преобразовать их в координаты относительно начала документа и передать их методу scrollTo, но гораздо проще воспользоваться методом scrollIntoView требуемого HTML-элемента. Этот метод гарантирует, что элемент, относительно которого он будет вызван, окажется в видимой области. По умолчанию он старается прокрутить документ так, чтобы верхняя граница элемента оказалась как можно ближе к верхней границе видимой области. Если в единственном аргументе передать методу значение false, он попытается прокрутить документ так, чтобы нижняя граница элемента совпала с нижней границей видимой области. Кроме того, броузер выполнит прокрутку по горизонтали, если это потребуется, чтобы сделать элемент видимым.

Своим поведением метод scrollIntoView напоминает свойство window.location.hash, когда ему присваивается имя якорного элемента (элемента <а name= >).

15.8.5. Подробнее о размерах, позициях и переполнении элементов

Метод getBoundingClientRect поддерживается всеми текущими броузерами, но если требуется обеспечить поддержку броузеров более старых версий, этот метод использовать нельзя и для определения размеров и позиций элементов следует применять более старые приемы. Размеры элементов определяются достаточно просто: доступные только для чтения свойства offsetWidth и offsetHeight любого HTML-элемента возвращают его размеры в пикселах. Возвращаемые размеры включают рамку элемента и отступы, но не включают поля, окружающие рамку снаружи.

Все HTML-элементы имеют свойства offsetLeft и offsetTop, возвращающие их координаты X и Y. Для многих элементов эти координаты откладываются относительно начала документа и непосредственно определяют позицию элемента. Но для потомков позиционируемых элементов и некоторых других элементов, таких как ячейки таблиц, эти свойства возвращают координаты относительно элемента-предка, а не документа. Свойство offsetParent определяет, относительно какого элемента исчисляются значения этих свойств. Если offsetРаrent имеет значение null, свойства содержат координаты относительно начала документа. Таким образом, в общем случае для определения позиции элемента е с помощью его свойств offsetLeft и offsetTop требуется выполнить цикл:

  function getElementPosition(e) {
var x = 0, у = 0;
   while(e != null) {
   x += e.offsetLeft;
   у += e.offsetTop;
   e = e.offsetParent;
   }
   return {x:x, у:у};
  }

Выполняя обход цепочки, образуемой ссылками offsetParent, и накапливая смещения, эта функция вычисляет координаты указанного элемента относительно начала документа. (Напомню, что метод getBoundingClientRect, напротив, возвращает координаты относительно начала видимой области.) Однако на этом тему позиционирования элементов нельзя считать исчерпанной - функция getElementPosition не всегда вычисляет правильные значения, и ниже будет показано, как исправить эту ошибку.

В дополнение к множеству свойств offset все элементы документа определяют еще две группы свойств; имена свойств в первой группе начинаются с приставки client, а во второй группе - с приставки scroll. То есть каждый HTML-элемент имеет все свойства, перечисленные ниже:

  offsetWidth
  offsetHeight
  offsetLeft
  offsetTop
  offsetParent
  clientWidth
  clientHeight
  clientLeft
  clientTop
  scrollWidth
  scrollHeight
  scrollLeft
  scrollTop

Чтобы понять разницу между группами свойств client и scroll, необходимо уяснить, что объем содержимого HTML-элемента может не умещаться в прямоугольную область, выделенную для этого содержимого, и поэтому отдельные элементы могут иметь собственные полосы прокрутки (смотрите описание CSS-атрибута overflow в разделе 16.2.6). Область отображения содержимого - это видимая область, подобная видимой области в окне броузера, и когда содержимое элемента не умещается в видимой области, необходимо принимать в учет позиции полос прокрутки элемента.

Свойства clientWidth и clientHeight похожи на свойства offsetWidth и offsetHeight, за исключением того, что они включают только область содержимого и отступы и не включают размер рамки. Кроме того, если броузер добавляет между рамкой и отступами полосы прокрутки, то свойства clientWidth и clientHeight не включают ширину полос прокрутки в возвращаемые значения. Обратите внимание, что для строчных элементов, таких как <i>, <code> и <span>, свойства clientWidth и clientHeight всегда возвращают 0.