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

Кнопка вверх – очень полезный и удобный элемент для любого сайта, особенно с очень длинными страницами. Для каждой cms можно найти несколько вариантов такого апгрейда. Например, для WordPress  русифицированный scrolltotop. Который успешно был установлен у меня на блоге и на сайте Косметолог в Москве.

Если хотите поменять всплывающую подпись «Вверх», это можно сделать в файле scrolltotop.php на 122 строке:

.attr ({title:'Вверх'})

И то, что в одинарных кавычках меняем на нужное.


 

 


Но сейчас я хочу рассказать о кнопке вверх для любого сайта. Этот скрипт я неоднократно устанавливал на DLE — klub-audioknigi.com, а пару дней назад на Hostcms — nevidimok.net т.е. кнопка подойдет для любого сайта в том числе и на HTML, и на самописной cms.

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

Как добавить на сайт кнопку вверх

1. Cкачать архив со скриптом

2. Разархивировать – внутри папка со скриптом, архив с другими кнопками (более 100) и инструкция по установке.

3. Скопировать папку button_up в корень сайта.

4. Вставить между тэгами <head> и </head>:

<script type="text/javascript" src="/button_up/button_up.js"></script>

5. Вставить между тэгами <body> и </body>:

<div id="ups"><a href="/" id="go-to-up"><img src="/button_up/up.png" title="Вверх" alt="" /></a></div>

4. Добавить в файл стилей:

#go-to-up {width: 70px; text-align: center; padding: 0; position: fixed; bottom: -2px; right: -4px; cursor: pointer; color: #666; text-decoration: none;}

#ups a img { opacity:0.7; -moz-opacity:0.7; filter:alpha (opacity=70); }

#ups a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha (opacity=100); }

Вот и всё обновляем страницу, опускаемся вниз и видим всплывающую кнопку вверх. При наведении кнопка подсвечивается.

Если захотите поменять изображение самой кнопки, скопируйте понравившуюся из дополнительного архива icons, в папку button_up под именем up.png

Комментариев еще нет.

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