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

Name: Скрипт кнопка вверх для любого сайта
SKU: 4223
Availability: InStock

Рекомендуемая цена: 100₽

Количество продаж: 22

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

Категория: JavaScript Метки: бесплатно, скрипт

Описание
Отзывы (0)

Описание

Установка

Папку button_up из архива залить в корень сайта.
Между тэгами <head> и </head> Вашего шаблона вставить:

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

1

<script type="text/javascript" src="/button_up/button_up.js"></script>
Между тэгами <body> и </body> вставить:

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

1
2
3
4
5

<div id="ups">
  <a href="/" id="go-to-up">
    <img src="/button_up/up.png" title="Вверх" alt=""/>
  </a>
</div>
В файл стилей (обычно 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); }

#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); }

Вариант отображения кнопки по середине экрана.

#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); }

#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); }

1	#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); }

1	#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;}

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