✎ Помощь начинающим и профессиональным блоггерам, создание, поддержка сайтов и блогов e-mail siteblogger@inbox.ru icq 353-724-370

Главная ›› Статьи по созданию сайта ›› Кнопка «Наверх» для сайта или блога

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

Кнопка «Наверх» на сайте или блоге — это привычная для многих «штука», которая позволяет упростить навигацию по контенту на странице сайта или блога снизу вверх. Сделать такую кнопку самостоятельно вовсе не сложно. Существует несколько способов создания кнопки «Наверх» для сайта. Можно воспользоваться для этого средствами 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;
}

Таким образом, у нас на сайте в правом нижнем углу появится кнопка «Наверх», нажав на нее, страница будет плавно прокручена к началу. Размеры кнопки и отступы от нее можно будет подправить в файле со стилями, о котором говорилось ранее. Вот, собственно, и все. Если будут вопросы — пишите в комментариях, готов на них ответить.

Поделитесь ссылкой! Подпишитесь на обновления, чтобы получать новые публикации!

Оставить комментарий

Siteblogger.ru – проект, охватывающий достаточно широкий круг вопросов: создание сайтов и блогов на WordPress, поисковые системы, поисковая оптимизация и продвижение сайтов, способы заработка в сети, эффективные инструменты работы в Интернете и другое. Кроме того, мы оказываем услуги создания сайтов и блогов на WordPress с последующим их продвижением, а также занимаемся настройкой и ведением контекстной рекламы Яндекс.Директ и Google Adwords. По поводу сотрудничества просьба обращаться через контакты, все заявки и предложения будут обязательно рассмотрены. При использовании материалов данного сайта, пожалуйста, указывайте прямую индексируемую ссылку на Siteblogger.ru.

«Как создать и продвинуть свой сайт»

2011–2016 © Siteblogger.ru
Рейтинг@Mail.ru