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

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

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

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

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

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

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

<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"text/javascript"</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"</span> &gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>

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

<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"stylesheet"</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"text/css"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"<!--?php bloginfo('stylesheet_directory'); ?--></span></span>/up/vk_up_back.css" media="screen" /&gt;
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"text/javascript"</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"<!--?php bloginfo('stylesheet_directory'); ?--></span></span>/up/vk_up_back.js"&gt;<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>

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

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

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

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

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

<span style="color: #cc00cc;">#topvk</span><span style="color: #00aa00;">{</span>
<span style="color: #000000; font-weight: bold;">top</span><span style="color: #00aa00;">:</span><span style="color: #933;">0px</span><span style="color: #00aa00;">;</span>
<span style="color: #000000; font-weight: bold;">left</span><span style="color: #00aa00;">:</span><span style="color: #933;">0px</span><span style="color: #00aa00;">;</span>
<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00aa00;">:</span><span style="color: #933;">13px</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">13px</span><span style="color: #00aa00;">;</span>
<span style="color: #000000; font-weight: bold;">cursor</span><span style="color: #00aa00;">:</span><span style="color: #993333;">pointer</span><span style="color: #00aa00;">;</span>
<span style="color: #000000; font-weight: bold;">display</span><span style="color: #00aa00;">:</span><span style="color: #993333;">none</span><span style="color: #00aa00;">;</span>
<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00aa00;">:</span><span style="color: #933;">100px</span><span style="color: #00aa00;">;</span>
<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00aa00;">:</span><span style="color: #933;">100%</span><span style="color: #00aa00;">;</span>
<span style="color: #000000; font-weight: bold;">position</span><span style="color: #00aa00;">:</span><span style="color: #993333;">fixed</span><span style="color: #00aa00;">;</span>
<span style="color: #000000; font-weight: bold;">cursor</span><span style="color: #00aa00;">:</span><span style="color: #993333;">pointer</span><span style="color: #00aa00;">;</span>
-webkit-transition-property<span style="color: #00aa00;">:</span><span style="color: #000000; font-weight: bold;">background</span><span style="color: #00aa00;">;</span>
-webkit-transition-duration<span style="color: #00aa00;">:</span>200ms<span style="color: #00aa00;">;</span>
-moz-transition-property<span style="color: #00aa00;">:</span><span style="color: #000000; font-weight: bold;">background</span><span style="color: #00aa00;">;</span>
-moz-transition-duration<span style="color: #00aa00;">:</span>200ms<span style="color: #00aa00;">;</span>
<span style="color: #000000; font-weight: bold;">z-index</span><span style="color: #00aa00;">:</span><span style="color: #cc66cc;">1000</span><span style="color: #00aa00;">;</span>
 
<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00aa00;">:</span>rgba<span style="color: #00aa00;">(</span><span style="color: #cc66cc;">225</span><span style="color: #00aa00;">,</span><span style="color: #cc66cc;">231</span><span style="color: #00aa00;">,</span><span style="color: #cc66cc;">237</span><span style="color: #00aa00;">,</span><span style="color: #cc66cc;">0.1</span><span style="color: #00aa00;">)</span><span style="color: #00aa00;">;</span>
<span style="color: #00aa00;">}</span>
 
<span style="color: #cc00cc;">#topvk</span><span style="color: #3333ff;">:hover</span><span style="color: #00aa00;">{</span>
<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00aa00;">:</span>rgba<span style="color: #00aa00;">(</span><span style="color: #cc66cc;">225</span><span style="color: #00aa00;">,</span><span style="color: #cc66cc;">231</span><span style="color: #00aa00;">,</span><span style="color: #cc66cc;">237</span><span style="color: #00aa00;">,</span><span style="color: #cc66cc;">0.8</span><span style="color: #00aa00;">)</span><span style="color: #00aa00;">;</span>
<span style="color: #00aa00;">}</span>

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

<span style="color: #a1a100;">@media screen and (max-width: 1100px){</span>
	<span style="color: #cc00cc;">#topvk</span><span style="color: #00aa00;">{</span>
		<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00aa00;">:</span><span style="color: #933;">40px</span> !important<span style="color: #00aa00;">;</span>
	<span style="color: #00aa00;">}</span>
 
	<span style="color: #cc00cc;">#topvk</span> <span style="color: #cc00cc;">#nobr</span><span style="color: #00aa00;">,</span> <span style="color: #cc00cc;">#topvk</span><span style="color: #3333ff;">:hover </span><span style="color: #cc00cc;">#nobr</span><span style="color: #00aa00;">{</span>
		<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00aa00;">:</span> <span style="color: #933;">0px</span> <span style="color: #933;">35px</span> !important<span style="color: #00aa00;">;</span>
		<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00aa00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">31px</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">12px</span> !important<span style="color: #00aa00;">;</span>
	<span style="color: #00aa00;">}</span>
<span style="color: #00aa00;">}</span>

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

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

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

<span style="color: #000066; font-weight: bold;">var</span> scrollto <span style="color: #339933;">=</span> <span style="color: #cc0000;">0</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">var</span> prevscroll <span style="color: #339933;">=</span> <span style="color: #cc0000;">0</span><span style="color: #339933;">;</span>
jq <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">noConflict</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
 
jQuery<span style="color: #009900;">(</span>document<span style="color: #009900;">)</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">function</span> <span style="color: #009900;">(</span>$<span style="color: #009900;">)</span><span style="color: #009900;">{</span>
	jq<span style="color: #009900;">(</span><span style="color: #3366cc;">"#topvk"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">css</span><span style="color: #009900;">(</span><span style="color: #3366cc;">'display'</span><span style="color: #339933;">,</span><span style="color: #3366cc;">'none'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
<span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
 
jq<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span>
	jq<span style="color: #009900;">(</span><span style="color: #3366cc;">'#topvk'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">click</span><span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span>
		prevscroll <span style="color: #339933;">=</span> $<span style="color: #009900;">(</span>window<span style="color: #009900;">)</span>.<span style="color: #660066;">scrollTop</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
		jq<span style="color: #009900;">(</span><span style="color: #3366cc;">'html, body'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">stop</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span>scrollTop<span style="color: #339933;">:</span>scrollto<span style="color: #009900;">}</span><span style="color: #339933;">,</span><span style="color: #cc0000;">1000</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span>
		jq<span style="color: #009900;">(</span><span style="color: #3366cc;">'#topvk #nobr'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">text</span><span style="color: #009900;">(</span><span style="color: #3366cc;">'Назад'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">removeAttr</span><span style="color: #009900;">(</span><span style="color: #3366cc;">'class'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">(</span><span style="color: #3366cc;">'class'</span><span style="color: #339933;">,</span><span style="color: #3366cc;">'back'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
		scrollto <span style="color: #339933;">=</span> prevscroll<span style="color: #339933;">;</span>
		<span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">}</span><span style="color: #009900;">)</span>
<span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
 
jQuery<span style="color: #009900;">(</span>window<span style="color: #009900;">)</span>.<span style="color: #660066;">scroll</span><span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span>
 
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">(</span>jQuery<span style="color: #009900;">(</span>window<span style="color: #009900;">)</span>.<span style="color: #660066;">scrollTop</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">&gt;</span><span style="color: #cc0000;">100</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span>
		jq<span style="color: #009900;">(</span><span style="color: #3366cc;">"#topvk"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">show</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
		jq<span style="color: #009900;">(</span><span style="color: #3366cc;">'#topvk #nobr'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">text</span><span style="color: #009900;">(</span><span style="color: #3366cc;">'Наверх'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">removeAttr</span><span style="color: #009900;">(</span><span style="color: #3366cc;">'class'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
		scrollto <span style="color: #339933;">=</span> <span style="color: #cc0000;">0</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">}</span>
<span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>

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

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

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

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

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

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

Запись опубликована в рубрике code-inside_com, WordPress. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Я не спамер This plugin created by Alexei91