Кнопка «Наверх» как?

Здравствуйте дорогие читатели моего блога!
Сегодня я расскажу вам как реализовать на своём блоге кнопку «Наверх», да не простую, а золотую с плавной прокруткой!
То как она будет работать вы можете посмотреть на моём блоге.
Появляться кнопка будет, когда пользователь прокрутит страничку вниз.

Итак пора начать!
Первым делом скачайте вот этот архив:

Скачать

В архиве лежат: js скрипт, а так же несколько изображений для вашей кнопки.
Перейдём к установке этой кнопки на ваш блог.
Загрузите файл vverx.js на блог.
Вы можете загрузить его в абсолютно любое место.

Теперь в редакторе вашей темы выберите файл «Заголовок» (header.php), и перед закрывающимся тегом:

</head>

вставьте два этих кода:

Подключение jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Подключение vverx.js:

<script type="text/javascript" src="адрес до файла/vverx.js">{lang: 'ru'}</script>

Затем загрузите на блог понравившуюся вам картинку кнопки «Наверх».
А в конец файла «Список стилей» (style.css), вставьте вот этот код:

.scrollTop{  
background:url(путь до изображения кнопки) 0 0 no-repeat;  
display:block; 
width:35px; 
height:20px;  
position:fixed; 
bottom:10px; 
left:4%;  
z-index:2000;  
}  
.scrollTop:hover{ 
background:url(путь до изображения кнопки) 0 0 no-repeat;  
display:block; width:35px; height:20px;  
position:fixed; bottom:10px; left:4%;  
z-index:2000;  
}

Рассмотрим CSS код немножко подробнее, чтобы вы могли его редактировать:

.scrollTop{ – кнопка «наверх» без наведения.

background:url – адрес картинки.
display:block; — не трогайте)
width:35px; — ширина изображения.
height:20px; — высота изображения.
position:fixed; — не трогайте)
bottom:10px; — отступы.
left:4%; — смещение изображения, чем больше значение тем правее кнопка «наверх»
z-index:2000; — не трогайте)

}

.scrollTop:hover{ – кнопка «наверх» с наведением.

Всё абсолютно-то же самое, просто если вы хотите чтобы при наведении кнопка «наверх» изменялась, то поставьте в background:url адрес другой картинки (которая будет появляться при наведении).

}

Остался последний штрих.
Перед закрывающимся тегом

</body>

вставьте вот этот код:

<a class='scrollTop' href='#header' style='display:none;'></a>

Вот и всё!
Теперь ваша кнопка «Наверх» начнёт работать, и вашим читателям будет удобнее перемещаться, по-вашему, блогу.
Если есть вопросы прошу задавать их в комментариях.

Да кстати я планирую провести очень интересный конкурс, советую вам подписаться на RSS, а то пропустите :shock:

И кстати:
На вашем блоге большой boucne rate? Тогда я вам советую прочитать пост на тему:
Как уменьшить показатель отказов на сайте

Искренне ваш Мудрый Кот.