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

Сегодня я расскажу как можно сделать кнопку Наверх, нажав на которую пользователь перенесется в самое начало страницы вашего сайта или блога. Данная кнопка будет очень полезна ресурсам, которые содержат объемные, огромные статьи, и тем пользователям, которым просто напросто лень пользоваться полосой прокрутки 😀

Кнопка Наверх выполнена без использования каких-либо дополнительных программ и плагинов. К тому же, она плавно передвигает вашу страницу, что и делает эту кнопку очень удобной.

Итак, установка выполняется в три простых шага:

1. Скачиваем архив с двумя файлами (картинка и файл скрипта). После скачки загрузите их к себе на сервер.

2. Скопируйте нижеприведенный код:

<noindex><a href=»#» id=»toTop»>Наверх</a>
<script src=»http://ваш_сайт.ru/verx.js» type=»text/javascript»></script>
<script type=»text/javascript»>
$(function() {
$(«#toTop»).scrollToTop();
});
</script></noindex>

и вставьте его в главной странице вашего сайта. У обычных сайтов это index.html, index.php. Для блога на WordPress — header.php.

3. Откройте файл таблицы стилей вашей темы (style.css). В конце файла необходимо будет вставить следущий код:

#toTop {
width: 100px;
background: #f1f1f1;
border: 1px solid #cccccc;
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
color: #666666;
text-decoration: none;}

Отлично! Теперь смело обновляйте страницу и смотрите на изменения. В нижнем правом углу у вас будет появляться кнопка Наверх, когда вы будете спускаться вниз страницы.

Не нравится дизайн кнопки или же она не подходит к шаблону вашего сайта? Ничего страшного! Настройки изображения кнопки меняются в файле style.css

Мой хороший друг, Дмитрий, сейчас участвует в очень интересном конкурсе «Реклама на века«, спешите, еще есть время для участия!