У вас часто появляется необходимость возвращаться к началу страницы после прочтения очередной статьи? Одно дело если она вмещается на видимую часть экрана, а если нет? Если в ней более 3-4 тыс. символов, а еще картинки и сотня-другая комментариев?!!

Уважайте и цените своих посетителей! Сделайте их пребывание на своем блоге приятным, воспользовавшись кнопкой «Наверх» для сайта. Я предложу вам, как минимум 3 различных способов сделать это.

В чем суть этой такой маленькой, но такой полезной вещицы? Все наверняка видели кнопку Вверх в Вконтакте. Она помогает быстро перенестись в начало просматриваемой страницы, что значительно снижает нагрузку на указательный палец во время прокручивания скролла мышки (или каким там пальцем вы это делаете ). Так вот, получается, что такая кнопка не только прибавляет удобств для просмотра страниц, но является профилактикой артрита … Ладно, отвлеклись. Теперь посерьезней (если получится ).

Данная кнопка позволяет перемотать страницу на самый верх, но некоторые модификации позволяют выполнять ту же процедуру вниз. Если, например, вы уже прочли статью, и заходите на сайт отслеживать комментарии, то тут-то удобно тыкнуть один раз по стрелочке и быстренько упасть на дно странички.

Про пользу поговорили, теперь же давайте перейдем к непосредственной процедуре, такой как установка кнопки «Вверх» на сайт.

1 путь —  установка кнопки Наверх плагинами

Разумеется, что большинству пользователей не особо хочется заморачиваться кодами и ковырятся в очередном php-файле. Но слава Богам, есть те люди, которые делают это за нас — это разработчики плагинов. Действительно, весь необходимый код уже зашит внутри, а от нас с вами требуется лишь кликнуть «Активировать» и радоваться крутоте своего веб-ресурса.

Плагин Scroll to Top

Первый плагин, который позволит реализовать нашу заветную мечту это Scroll to Top от Rafael Cirolini (Рафаель Киролини, прости чувак если не правильно написал твою фамилию ). Как Вам наверняка известно, его можно скачать на сайте WordPress.org и сделать это прямо из админки wordpress. (Кстати, почитайте эту статью. Быть может вы используйте свой движок не на полную ). Сам плагин чрезвычайно легок и приятен на вид. По умолчанию он выглядит так:

Менять можно как цвет фона, так и цвет текста. Для этого необходимо обратится к настройкам данного плагина. Сделать это можно по следующей схеме.

1 — Включить/выключить кнопку

2 — Текст, который будет отображаться на кнопке

3 — Ширина кнопки

4 — Цвет текста на кнопке

5 — Цвет фона кнопки 

6 — И не забываем сохранить наши изменения

Как видите, настроек минимум и они все до безобразия понятны. Тем же, кто хочет еще подробнее, то я настроил себе кнопку так.

И выглядеть она стала так. (почти как была раньше Вконтакте )

Как вы поняли, я опробовал этот вариант на себе. Он стильный (имеется легкая прозрачность) и простой, нагрузка на сервак минимальна — сродни установке кода. Но что же теперь остановится на этом. Нет! Давайте рассмотрим другие способы.

Плагин Dynamic “To Top” Plugin

Этот плагин уже тяжелее, но и настройки у него по серьезнее. Кому хочется выжать из кнопки «Наверх» максимум красоты и функциональности, но при этом готов подключить +1 плагин, то прошу - Dynamic “To Top” Plugin. Скачиваем его и закидываем через FTP в корневую папку или добавляем, опять-таки, через админку.

В результате активации плагина у нас появится стильная кнопка Наверх в виде стрелки в кругляше.

В принципе, можно оставить все как есть, но тогда у вас будет точно такая же кнопка как и у сотен других блоггеров. Мы же хотим отличаться? Тогда давайте залезем в настройки

Весьма странно, но заглянуть в параметру нужно через «Внешний вид»→»To Top». Ну да ладно. Это мелочи жизни . Когда мы перешли сюда, то перед глазами возникнет следующее.

Тут настроек множество. Можно рассказать про все и я так и сделаю .

1 — Тут можно выстроить скорость перемотки страницы вверх

2 — расстояние сверху до кнопки в пикселях

3 — как я понял, он используется для прокрутки страниц вверх. Вроде того, как это будет делаться. Рекомендую оставлять как есть. Работает и ладно

4 — Положение кнопки на странице. Расположение меняется соответственно четырех углов: слева-вверху, слева-внизу, справа-вверху, справа-внизу. Для наглядности вы сможете увидеть как кнопка будет скакать по странице прямо тут — 6.

5 — По идее данная опция включает кнопку вверх для отображения в мобильных браузерах, но я не тестировал, так что будем думать, что она работает и так.

6 — как я уже сказал выше, все изменения сразу же отображаются на картинке. Это вроде предварительного просмотра.

7 — Текстовая версия кнопки. Интересная замена обычного значка словами. (если вы активируете эту настройку, то появятся несколько дополнительных параметров для отображения текста: сам текст, его размер, цвет и т.д.)

8 и 9 — Позволят вам поиграть с размерами кнопки Вверх

10 — Тут тоже все предельно ясно: цвет фона и цвет границы

11 — Позволит вам настроить ту самую границу: ее ширину и округлость.

12 — Включение/выключение градиента (засветления к верху кнопки) и тени.

13 — Разумеется, сохраняем.  

Таким образом мы получим уникальную кнопку вверх для сайта по своему вкусу. Следует отметить, что кнопка не является статичной картинкой, а следствие CSS — настроек, что в значительной мере снижают нагрузку на блог. Хотя множество настроек могут скрадывать данный плюс.

2 путь — установка кнопки Наверх кодом

Вот он! Тот самый способ, который не нагружает блог, но и достаточно эффективен, я говорю об установке специального кода. Разумеется, перед тем как лезть в файлы, необходимо помнить правила безопасного редактирования кода. Когда мы освежили в памяти данные пункты, то можно смело с молотком и монтировкой (Gordon Freeman?!) приниматься за дело.

Чтобы реализовать следующий код, необходимо познакомится (если вы еще не слышали) с такими понятиями как JavaScript и jQuery. Страшно стало? Не бойтесь. Это лишь слова обозначающие специальные подключаемые библиотеки для работы сайта. Хм… Давайте я не буду углубляться в определения. Скажу лишь, что их использование помогает привнести живости в самые скучные элементы дизайна и функционала сайта. В ближайшее время я планирую подсесть на них более плотно, а заодно и вас подсадить .

Так вот. Для удобства хочу посоветовать вставлять следующие участки кода друг за другом в файл footer.php перед тэгом </body>.

Для начала необходимо подключить библиотеку  jQuery с помощью данного кода:

<script language="JavaScript" type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

Далее необходимо записать код функции появления и исчезания кнопки Наверх на сайте.

<script language="JavaScript" type="text/javascript">
$(function() {
 $.fn.scrollToTop = function() {
  $(this).hide().removeAttr("href");
  if ($(window).scrollTop() >= "250") $(this).fadeIn("slow")
  var scrollDiv = $(this);
  $(window).scroll(function() {
   if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")
   else $(scrollDiv).fadeIn("slow")
  });
  $(this).click(function() {
   $("html, body").animate({scrollTop: 0}, "slow")
  })
 }
});
 
$(function() {
 $("#Go_Top").scrollToTop();
});
</script>

И только после всего этого вставляем саму кнопку. Тут берется простая картинка на ваш выбор и подключается к функции, описанной выше.

<a style='position: fixed; bottom: 25px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
 <img src="http://ваш-сайт.ru/wp-content/themes/ваша-тема/images/ваш-файл.png" alt="Наверх" title="Наверх">
</a>

Разумеется вы поняли, что слова «ваш-сайт», «ваша-тема» и «ваш-файл» нужно заменить на соответствующие.

Хочу внести еще одну ясность. Код этот писал не я, но нашел его в свободной раздаче. К сожалению потерял ссылку. Но примеры применения данного кода, можно встретить довольно часто в сети Интернет.

3 путь — установка универсальной кнопки для всех сайтов

Вот еще один довольно интересный способ облегчить себе жизнь в Интернете. Правда тут ставка идет на удобство веб-серфинга для обычных пользователей. О чем же я говорю? О специальном расширении для браузеров, которое позволяет проматывать любые страницы веб-сайтов, независимо оттого есть ли на них своя кнопка «Наверх» или нет. Интересно отметить, что в настройках можно прокручивать как на начало, так и в конец страницы. Это в значительной степени облегчает просмотр сайтов и блогов. В конечном счете пользоваться или нет, каждый решит для себя сам. Но ознакомить с такими расширениями, раз уж я завел разговор, я обязан .

Для Google Chrome расширение, устанавливающее кнопку Наверх, называется до банального просто: Scroll To Top Button. Чтобы вы не мучались вот ссыль. Соответственно и выполняет именно эту функцию — добавляет на все открываемые страницы красивую кнопку Наверх.

Для пользователей Opera имеется схожее расширение, которое именуется Button Scroll Up. Опять-таки, вот ссыль для удобства.

Ну и для третьего мейнстриймого (давно хотел впихнуть это слово ) браузера — FireFox я такого расширения не нашел. Может кто из вас, мои читатели, встречал?

Все?

Да, все! Но это только конец Этой статьи, а впереди еще столько интересного! Так что обязательно подписывайтесь на рассылку новостей, присоединяйтесь в Твиттере и Вконтакте, чтобы первыми получать свежие и интересные статьи с сайта WebPathBlog.ru.

___________________________________________________

Всего хорошего и удачи Вас всем!

С уважением,

Лысенко Евгений