Сегодня мы поговорим о сохранении позиции скролла при переходе между страницами.

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

А помогут нам в этом библиотека jQuery и технология Cookies. Впрочем, положения можно сохранять и в сессию, но это уже не так важно.

Алгоритм следующий: мы проверяем, есть ли нужные куки с позицией скролла. Если они есть, применяем их, прокручивая скролл до последней использованной позиции. В процессе работы эта позиция изменится, а запишем мы её в куки тогда, когда будем переходить на другую страницу по ссылке из этого меню.

Естественно, потребуются две библиотеки: jQuery и jQuery.cookie.

Перейдём сразу к коду. Разметка html будет иметь следующий вид:

  

     

        
 
        
 
        ... 
     
  

#wrap — это обёртывающий div, который не даёт списку навигации «расползаться» на всю свою высоту. #menu — это само меню, высота которого заведомо больше, чем высота #wrap. Если у #menu задать css-свойство overflow: scroll, то внутри #wrap появится скроллбар. Его-то мы и будем отслеживать с помощью такого js-кода:

$(document).ready(function(){
	if($.cookie("scroll")) {
		var scrt = $.cookie("scroll");
		$("#menu").scrollTop(scrt);
  		}
});

Т.е. по загрузке документа мы проверяем, есть ли куки, и применяем их к скроллеру с помощью функции scrollTop(). Эта функция несёт положение скроллера в пикселах от верхней границы элемента.

Теперь надо зафиксировать положение при переходе на другую страницу.

$(document).ready(function(){
  $("#menu a").click(function(){
	var scrt = $("#menu").scrollTop();
	$.cookie("scroll", scrt);
  });
});

При готовности документа по событию нажатия на ссылку внутри списка #menu определяется положение скроллбара при помощи всё той же функции scriollTop(). Затем это значение кладётся в cookie.

Вот и всё! Система работает!

Безошибочного кода Вам!