Кнопка-панель «Наверх» как на Вконтакте для WordPress и других сайтов

Для длинных страниц с большим объемом информации давно уже стало стандартом наличие кнопки «Наверх», возвращающей пользователя к самому началу страницы, где обычно находятся все кнопки навигации и меню. Сделать такую кнопку можно по-разному, например ссылкой на элемент вверху страницы. У сервиса Вконтакте с его бесконечными подгружаемыми налету страницами возврат «Наверх» представлен панелью, причем если пользователь желает вернуться к тому месту, где он закончил читать, повторное нажатие на панель перенесет его вниз к точке остановки.

Рассмотрим, как реализовать подобную систему для любого сайта практически на любом движке, поддерживающем шаблоны, а также для обычных статических html-сайтов.
В качестве примера будет рассмотрен WordPress.

Как и для любой динамической фичи, нам понадобится три компонента: html, css и javascript, и одна картинка-спрайт, содержащая стрелочки вверх и вниз.

Скачайте архив и распакуйте его в папку вашей темы.

Подключение и html

Теперь подключим файл стилей и скрипт к теме. Если вы не используете jquery на вашем сайте — подключите и его тоже:

<script type="text/javascript" src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js" ></script>

Подключение css и js:

<link rel="stylesheet" type="text/css" href="/up/vk_up_back.css" media="screen" />

<script type="text/javascript" src="/up/vk_up_back.js"></script>

Следующий html-код вставим сразу после открывающего тега. В WordPress он находится обычно в header.php

Здесь блок с id topvk — это сама панель, а внутренний блок — это текст, который показывается вверху панели. Он будет изменяться динамически, поэтому для облегчения доступа присвоим и ему id со значением nobr.

Настройка стиля панели

В самом css нет ничего сложного: ширину панели можно изменять на свой вкус в 7 строке файла стилей, в 17 строке задается ее цвет.

Конструкция rgba(225,231,237,0.1) означает, что панель будет цвета rgb(225,231,237) с непрозрачностью 10%. Соответственно в 21 строке указано, что при наведении непрозрачность увеличивается до 80%.

#topvk{
top:0px;
left:0px;
padding:13px 0 13px;
cursor:pointer;
display:none;
width:100px;
height:100%;
position:fixed;
cursor:pointer;
-webkit-transition-property:background;
-webkit-transition-duration:200ms;
-moz-transition-property:background;
-moz-transition-duration:200ms;
z-index:1000;
 
background:rgba(225,231,237,0.1);
}
 
#topvk:hover{
background:rgba(225,231,237,0.8);
}

Отдельного внимания заслуживает следующая конструкция в конце файла стилей:

@media screen and (max-width: 1100px){
	#topvk{
		width:40px !important;
	}
 
	#topvk #nobr, #topvk:hover #nobr{
		padding: 0px 35px !important;
		margin: 0 31px 0 12px !important;
	}
}

Она означает, что если ширина экрана меньше 1100 пикселей, панель станет узкой, чтобы не закрывать содержимое сайта, а надпись будет свободно плавать рядом с ней, не мешая взаимодействию с сайтом.

Немножко динамической магии

Теперь рассмотрим javascript, оживляющий эту панель:

var scrollto = 0;
var prevscroll = 0;
jq = jQuery.noConflict();
 
jQuery(document).ready(function ($){
	jq("#topvk").css('display','none');
});
 
jq(function(){
	jq('#topvk').click(function(){
		prevscroll = $(window).scrollTop();
		jq('html, body').stop().animate({scrollTop:scrollto},1000, function(){
		jq('#topvk #nobr').text('Назад').removeAttr('class').attr('class','back');
		scrollto = prevscroll;
		});
	})
});
 
jQuery(window).scroll(function(){
 
	if(jQuery(window).scrollTop()>100){
		jq("#topvk").show();
		jq('#topvk #nobr').text('Наверх').removeAttr('class');
		scrollto = 0;
	}
});

Зададим 2 глобальных переменных — куда подскролливать сайт и предыдущее местонахождение пользователя. Скрипт писался еще под старую версию jQuery, а затем jQuery был обновлен, поэтому добавим для совместимости jq = jQuery.noConflict();

Если у вас еще старая версия, переменную jq везде можно заменить на привычный $.

При начальной загрузке панель не показывается. Когда пользователь опускается ниже чем на 100 пикселей от верха страницы, панель показывается с текстом «Наверх» и соответствующей стрелочкой.

Что происходит при клике на панель:

• запоминается позиция пользователя в переменную prevscroll
• страница плавно подскролливается к желаемой позиции (изначально это 0). 1000 — это время, за которое будет совершена анимация. чем меньше, тем быстрее произойдет прокрутка.
• текст на панельке меняется на «Назад», стрелка переворачивается
• позиция scrollto становится равной предыдущему положению на странице.

Таким образом, если пользователь кликнет на панели и вызовет функцию еще раз, страница будет подскроллена к тому месту, где он был ранее, а кнопка опять поменяет текст на «Наверх».
Источник code-inside.com