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

Кнопка «Наверх» на сайте или блоге — это уже привычная для многих примочка, значительно облегчающая «перемотку» страницы сайта снизу вверх. Сделать такую кнопку не трудно, для этого вам необходимо просто внимательно дочитать эту запись до конца.

Вариантов, как прилепить такую кнопочку на сайт, множество — есть способы сделать это и средствами чистого HTML, и с использованием Javascript, и jQuery. Я предпочитаю Javascript — быстро, просто, понятно.

Что понадобится для создания кнопки «Наверх»? Картинка, с изображением стрелки и файл скрипта. Я  дам и то, и другое, уже готовое. Вы можете выбрать иконку по своему вкусу, благо, что их в сети великое множество.

Ну а вот и мануал!

Как сделать кнопку Наверх?

1. Скачайте архив с Javascript и картинкой «Наверх». Картинку лучше положить в папку с изображениями, наверняка у вас на сайте или блоге есть такая. Так она не будет захламлять корневую директорию. Возможно, у вас есть и специальная папка для Javascript, я же положил его просто в корневую папку.

2. Теперь копируйте вот этот код:

1
2
3
4
5
6
<a id="toTop" href="#"><img src="/images/up.png" alt="" /></a><script type="text/javascript" src="http://ваш_сайт.ru/top.js"></script><script type="text/javascript">// < ![CDATA[
 
$(function() {    
$("#toTop").scrollToTop();    
});    
// ]]></script>

Код необходимо разместить в одном из файлов вашего сайта. Я сделал кнопку «Наверх» для сайта на DCMS, код вставлял в document.tpl, для блога на WordPress советую вставить код в файл footer.php, перед закрывающим тегом body.

Не забудьте заменить http://ваш_сайт.ru/top.js на свой домен и свой путь к Javascript, если он у вас не в корне.

3. Теперь подредактируем CSS файл вашего сайта, для красивого отображения кнопки. Вставьте код, данный ниже, в таблицу стиля, обычно это style.css.

#toTop {     
      width: 100px;     
      background: #f1f1f1;     
      border: 1px solid #cccccc;     
      text-align: center;     
      padding: 5px;     
      position: fixed;     
      bottom: 10px;     
      right: 10px;     
      cursor: pointer;     
      color: #666666;     
      text-decoration: none;}

Вот и все! Теперь, когда вы будете прокручивать страницы сайта вниз, в правом нижнем углу будет появляться кнопка «Наверх», нажав на нее, страница будет плавно прокручена к началу.
Разумеется, CSS код и картинку вам необходимо будет подогнать/изменить так, чтобы она максимально органично вписывалась в дизайн вашего сайта.
С уважением, d_ma (http://d-ma.name/)

Posted in WordPress, Создание сайта and tagged , , , , , .

5 Comments

  1. А можно сделать чуток короче, если переработать. Тогда весь код будет в одном файле и без лишнего вызова функций.

    P.S. И на блоге такая кнопка не помешает)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *