Скрипт кнопка вверх для любого сайта

Кнопка вверх предназначена для плавного возвращения в начало страницы. Кнопка появляется при прокручивании страницы вниз. При наведении курсора кнопка подсвечивается.

Установка

  1. Папку button_up из архива залить в корень сайта.
  2. Между тэгами <head> и </head> Вашего шаблона вставить:
    <script type="text/javascript" src="/button_up/button_up.js"></script>
  3. Между тэгами <body> и </body> вставить:
    <div id="ups">
    <a href="/" id="go-to-up"><img src="/button_up/up.png" title="Вверх" alt="" />
    </a></div>
  4. В файл стилей (обычно style.css) добавить:
  • Вариант отображения справа внизу  klub-audioknigi.com
    #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); }
  • Вариант отображения кнопки по середине экрана nevidimok.net
    #ups {display: block; width: 1031px; text-align: right; padding: 0; position: fixed; bottom: 50%;}
    #toTo_button {padding: 0; 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); }

Настройка (не обязательно)

Место появления кнопки относительно начала страницы:
В файле top_button.js ищем $(window).scrollTop()<="500"
Значение 500 меняем на необходимое
< 500 – появляется выше;
> 500 – появляется ниже.

Изменение прозрачности кнопки в состоянии покоя и при наведении курсора:
В файле стилей меняем значение opacity - непрозрачность
#ups a img { opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70); } – непрозрачность 70%
#ups a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); } – при наведении нет прозрачности

Местоположение кнопки относительно границ страницы:
В файле стилей меняем значение bottom – расстояние снизу, и right –расстояние справа
#go-to-up {width: 70px; text-align: center; padding: 0; position: fixed; bottom: 2px; right: 4px; cursor: pointer; color: #666; text-decoration: none;}

Скрипт был успешно установлен на движках DLE, Hostcms.