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

К написанию этого поста меня вынудила одна из моих статей про кнопку наверх. Дело в том, что принцип действия кнопки основывается на том же принципе что и во вконтакте — то есть при переходе наверх, есть возможность снова вернуться в то место на странице, на котором мы находились до этого. Эта же функциональность доступна в моём плагине для 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 или следите за мной в социальных сетях.
  • Миша: Добрый день! В принципе вам только немного нужно доработать код из этого поста - категории уже есть, цена - это и так...

  • eveniy: Добрый день Михаил, подскажите на примере как добавить свои произвольные поля в в вашу форму фильтрации: Я так понимаю...

  • Миша: Отлично! )

  • Дмитрий: сам разобрался: в настройках кастомного типа записи недавно оптимизировал настройки и переоптимизировал: в аргументе 'ta...

  • Дмитрий: У меня по какой-то причине пропало отображение (как в колонке меню слева, так и метабокс в записях ) раздела рубрик для...