Кнопка вверх для сайта и блога WordPress

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

Как выглядит кнопка вверх у меня, Вы можете посмотреть, прокрутив чуть ниже мой блог — эта кнопка появится в нижнем правом углу.

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

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

Рассмотрим два варианта установки такой стрелки.

Установка кнопки наверх с помощью плагина

На блоге WordPress это можно сделать с помощью плагина Scroll to Top. Для этого установите плагин у себя. Установка самая обычная: заходите в административную панель своего блога, выбираете Плагины — Добавить новый, в окошке поиска вбиваете название плагина, и нажимаете кнопку Найти. Установите плагин, и активируйте его. Не забудьте только перед этим сделать бекап блога. Впрочем, бекап желательно делать перед любым изменением в движке, вроде обновления версии или установки любых плагинов.

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

Чтобы установить свою картинку, разместите ее на хостинге, и после этого в пункте Ссылка к изображению кнопки пропишите путь к Вашей картинке. Выглядит путь примерно так: http: //vashblog.ru/papka/papka/kartinka.gif
То есть все входящие папки указываются через слэш, а в конце прописывается название картинки.

После этого Ваша картинка появится на месте кнопки вверх, вместо стандартной.

Установка кнопки наверх без плагина

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

Для начала нужно подключить библиотеку jQuery. Это файл, который называется jquery.js. Некоторые темы WordPress его уже имеют, и если это так, то Вам его нужно найти. Если в теме Вашего блога такого файла нет, значит, нужно его ставить. Заходите на официальный сайт разработчиков jQuery, нажимаете Download, затем и скачиваете последнюю версию этой библиотеки. Можно скачать сжатую или несжатую версию, они равноценны. Выглядят они так:

• Download the compressed, production jQuery — сжатая версия
• Download the uncompressed, development jQuery — несжатая версия.

Как правило, в браузере они открываются в виде кода. В таком случае Вам нужно будет создать пустой файл jquery.js, и поставить в него код. Пустой файл можно сделать следующим образом: открываете блокнот, и сохраняете пустой документ как текстовый файл. Затем переименовываете его и делаете нужное расширение.

После этого размещаете на хостинге в любом удобном для Вас месте.

Затем в административной панели блога заходите в пункт Внешний вид — Редактор, находите Шапку, то есть файл header.php,  и прописываете перед закрывающим тэгом </head> следующую строку кода:

<script type='text/javascript' src='http://Путь к файлу/jquery.js'></script>

В этой строке Вы указываете свой путь к загруженному файлу jquery.js.

После этого Вам придется скачать еще один файл, scroll.js, который отвечает за работоспособность кнопки вверх. Скачать файл Вы можете по ссылке:

• скачать файл scroll.js

Скачайте и разархивируйте его. Этот файл Вам тоже нужно разместить на хостинге. Место размещения особо не играет роли. Можете разместить его там же, где и jquery.js, чтобы все было в одном месте.

Также разместите на хостинге файл изображения кнопки.

После этого начинаем редактирование файла footer.php. Это можно сделать через административную панель, также как в случае с файлом header.php. Заходите в пункт Внешний вид — Редактор, находите Подвал, и перед закрывающим тэгом </body> вставляете код:

<noindex>

<a id="toTop" href="#"><img src="http://Путь к картинке/картинка.png" alt="« align=»absmiddle" border="0" /></a>
<script type="text/javascript" src="http://Путь к файлу/scroll.js"></script>
<script type="text/javascript">// <![CDATA[

$(function() {  $("#toTop").scrollToTop();  });// ]]></script></noindex>

В этом коде прописываете свой путь к картинке, и путь к файлу scroll.js.

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

Реализуется это при помощи стиля CSS:

#toTop {
position : fixed;
bottom : 10px;
right : 0px;
cursor : pointer;
}

На блоге этот стиль прописывается в файле style.css. Его тоже можно найти в административной панели в пункте Внешний вид — Редактор — Список стилей. Находите и устанавливаете этот код.

Если у Вас не блог WordPress, а какой-то другой сайт, на другом движке или простой сайт html, все эти коды Вы прописываете в основном файле, и в файле style.css, если он есть.

Вот и все, кнопка вверх должна у Вас появиться. Еще раз повторю коротко, что нужно сделать:

1. Скачать файлы jquery.js и scroll.js.
2. Разместить эти файлы, и файл картинки на хостинге.
3. Прописать необходимые коды в файлах: header.php, footer.php и style.css.

Желаю Вам успеха в установке кнопки!

Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером