Кнопка вверх – очень полезный и удобный элемент для любого сайта, особенно с очень длинными страницами. Для каждой 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