Кнопка «Наверх» на сайте или блоге — это привычная для многих «штука», которая позволяет упростить навигацию по контенту на странице сайта или блога снизу вверх. Сделать такую кнопку самостоятельно вовсе не сложно. Существует несколько способов создания кнопки «Наверх» для сайта. Можно воспользоваться для этого средствами HTML или jQuery. А для блогов на WordPress имеется несколько плагинов, реализующих данную задачу. Скачать эти плагины можно в Интернете без особого труда. Однако подобные плагины могут тормозить загрузку страниц — поэтому проще эту кнопку сделать вручную.
Кнопка «Наверх», как сделать?
1. Первое, что нужно сделать — это скачать архив со скриптом. Это можно сделать здесь. После чего распаковываем архив и переносим оттуда файл top.js в корневую директорию на своем хостинге. Картинку самой кнопки нужно перенести на хостинг, соответственно, в коде указать на нее ссылку.
2. Теперь скопируем вот этот код:
<a id="toTop" href="#"><img alt="Наверх" src="site.ru/images/top.png" border="0" /></a>
<script type="text/javascript" src="/site.ru/top.js"></script><script type="text/javascript">// <![CDATA[
$(function() { $("#toTop").scrollToTop(); });
// ]]></script>
Код необходимо разместить в одном из файлов вашего сайта. К примеру, для блога на WordPress можно разместить его в файле footer.php перед закрывающим тегом body.
3. После нужно создать стили для отображения кнопки «Наверх». Находим файл со стилями (обычно это файл style.css) и вставляем в него следующий код:
#toTop {
width: 45px;
height: 45px;
border: 0;
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
color: #666666;
text-decoration: none;
}
Если к блогу подключена библиотека JQuery, то все будет работать. Если нет, то для этого перед закрывающим тегом head необходимо добавить код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Таким образом, у нас на сайте в правом нижнем углу появится кнопка «Наверх», нажав на нее, страница будет плавно прокручена к началу. Размеры кнопки и отступы от нее можно будет подправить в файле со стилями, о котором говорилось ранее.
