Кнопка «Наверх» на сайте или блоге — это привычная для многих «штука», которая позволяет упростить навигацию по контенту на странице сайта или блога снизу вверх. Сделать такую кнопку самостоятельно вовсе не сложно. Существует несколько способов создания кнопки «Наверх» для сайта. Можно воспользоваться для этого средствами HTML или jQuery. А для блогов на WordPress имеется несколько плагинов, реализующих данную задачу. Скачать эти плагины можно в Интернете без особого труда. Однако подобные плагины не редко тормозят загрузку страницы, поэтому, на мой взгляд, проще эту кнопку сделать вручную с помощью JavaScript.
Кнопка «Наверх», как сделать?
1. Первое, что нужно сделать — это скачать архив со скриптом. Это можно сделать здесь. После чего распаковываем архив и переносим оттуда файл top.js в корневую директорию на своем хостинге. Картинку самой кнопки нужно перенести на хостинг, в данном примере сюда — http://Ваш сайт/images/top.png.
2. Теперь скопируем вот этот код:
<a id="toTop" href="#"><img alt="Наверх" src="Ваш сайт/images/top.png" border="0" /></a>
<script type="text/javascript" src="/ваш сайт/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: 0px solid #cccccc;
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
color: #666666;
text-decoration: none;
}
Таким образом, у нас на сайте в правом нижнем углу появится кнопка «Наверх», нажав на нее, страница будет плавно прокручена к началу. Размеры кнопки и отступы от нее можно будет подправить в файле со стилями, о котором говорилось ранее. Вот, собственно, и все. Если будут вопросы — пишите в комментариях, готов на них ответить.
