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

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

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

Теперь давайте разберёмся, как можно получить положение прокрутки при помощи 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);
}

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

Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

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

Комментарии 1

  • Muslim9 декабря 2014 в 21:12 #

    Кнопка вверх и на позицию скролла как в вк)

    	window.countScroll = 0, scrollPosition = 0;
    	eWindow.bind('mousewheel DOMMouseScroll', function(e){ 
    		if(countScroll == 1) countScroll = 0; 
    	});
     
    	$('.up').click(function(event){ scrollUpD (event.target); });
     
    	function scrollUpD (elementTarget) {
    		countScroll++;
    		if(countScroll == 1) {
    			scrollPosition = eWindow.scrollTop();
    			eWindow.scrollTop(0); 
    		}
     
    		if(countScroll == 2) {
    			eWindow.scrollTop(scrollPosition);
    			countScroll = 0;
    		}
    	}

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
Получайте новости блога по email или следите за мной в социальных сетях.
  • alex morozov: Ура, спасибо! Все-таки я разобрался ! Сделал:

  • alex morozov: Сделал Класс добаляется даже если поле пустое

  • Vladislav: Лучше бы посоветовали изящное решение имеющейся проблемы.

  • alex morozov: Не очень понял. Я добавляю метабокс через класс, почти как у вас. class Desc_Meta_Box { private $screens = array(...

  • Миша: Метод тыка хорош, но оснвоы нужно знать в любом случае. Рекомендую почитать это.