Как определить текущее положение на странице (на сколько прокручен документ)

К написанию этого поста меня вынудила одна из моих статей про кнопку наверх. Дело в том, что принцип действия кнопки основывается на том же принципе что и во вконтакте — то есть при переходе наверх, есть возможность снова вернуться в то место на странице, на котором мы находились до этого.

Для этого и требуется определять и сохранять в переменную координаты расположения на странице (их можно также назвать координатами окна браузера относительно всей веб-страницы).

Теперь давайте разберёмся, как можно получить положение прокрутки при помощи JavaScript.

Координаты Y (по вертикали)

Такой вариант приходится использовать более часто, так как мало какие страницы прокручиваются по горизонтали, да и то, в большинстве случаев это баг разработчиков.

Для того, чтобы было понятно, что именно мы будем определять — небольшой рисунок:

координаты прокрутки по вертикали

А это Javascript-код:

var posTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

Координаты X (по горизонтали)

Как я уже говорил, мне редко приходилось сталкиваться с сайтами, где используется прокрутка по горзионтали, тем не менее рассмотрим такой вариант тоже:

координаты прокрутки по горизонтали
var posLeft = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;

Пример

Возможно пример не самый удачный, но зато простой и понятный, вставлять его можно в любое место на странице между тегами <script> и </script>.

window.onscroll = function() {
	posLeft = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
	posTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
	alert('x=' + posLeft + '\ny=' + posTop);
}

Если захотите опробовать этот пример — рекомендую прокручивать страницу именно колесиком мыши, а то у вас вылезет нереальное количество алертов.

Миша Рудрастых Разработчик WordPress WooCommerce

Миша Рудрастых

Впервые познакомился с WordPress в 2009 году, и после двух лет мучений с Joomla и самописными движками это был просто бальзам на душу. С 2014 года меня можно встретить на WordCamp — официальной конфе по WP в Москве, иногда там выступаю. Также в настоящее время веду курсы по WordPress в Epic Skills в Питере.

Смотрите также