Кнопка «Вверх» для сайта на jQuery от Яндекса

Привет! Сегодня расскажу о том, как легко прикрутить к любому блогу или форуму кнопку "ВВЕРХ" как у меня на сайте. Удобства и интерактивности никогда не бывает много, тем более, когда это не занимает много времени. Этот простой и легкий скрипт на jQuery я подсмотрел на Yandex и сделал себе аналогичный.

Вообще, в настоящее время, разработка сайтов всё больше напоминает конструктор. В сети полно готовых скриптов и модулей, которые остается только грамотно скомпоновать на своем сайте. Но, для этого, всё-таки, необходимо иметь начальные знания и представления о CSS, PHP и JavaScript.

Понадобится всего пара минут времени для создания красивой и работающей кнопочки "Наверх"! (единственное условие - у вас должна быть подключена библиотека jQuery).

1. В шаблон сайта, перед закрывающим тегом </head> добавляем:

<script type="text/javascript">$(document).ready(function(){
  $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
  $('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

2. Перед закрывающим тегом </body> в шаблон сайта добавляем следующий html-код:

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>

3. Осталось добавить CSS-стили для оформления кнопки «Наверх» в файл стилей вашего сайта (например styles.css)

.b-top {
  z-index:2600;position:fixed;left:0;
  bottom:70px;width:35%;margin-left:50%;
  opacity:0.5;filter:alpha(opacity=50);
}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {
  z-index:2600;position:absolute; display:block;
  left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px;
  color:white;border-radius:7px;
  background:#888 url(img/b-top.png) no-repeat 50% 11px;
}

4. файл с изображением стрелки (b-top.png скачать)

Что тут можно настроить или изменить под себя (для тех, кто вообще не шарит в CSS):

• первым делом измените путь к файлу с изображением стрелки на тот, куда вы его сохранили на сайте
• background:#888 - цвет фона кнопки
• width:35%; - положение кнопки относительно правого края страницы
• bottom:70px; – смещение кнопки относительно нижнего края страницы