Для удобства пользователя вебмастера часто устанавливают на своих сайтах так называемую кнопку «Вверх». Как правило, она появляется, когда мы перелистываем страницу вниз. Нажав на нее, мы можем быстро попасть наверх страницы. Многие пользователи привыкли к подобному функционалу.

В этой статье я расскажу, как сделать кнопку «Вверх» на своем сайте. Буду показывать на примере WordPress, но это не значит, что данный код не будет работать на других движках. Приступим.

Для создания нашей кнопки будем использовать jQuery и CSS.

Действие №1 — jQuery

ВНИМАНИЕ! В этом действии есть 2 варианта. Нужно выполнить ТОЛЬКО ОДИН! На Ваш выбор.

Вариант №1

Данный вариант немного сложнее, но предпочтительнее.

Скачиваем файл с кодом.

СКАЧАТЬ

1) Подключаемся к своему сайту по FTP (через FileZilla, например).

2) Проходим в папку со своей темой (wp-content/themes/имя_вашей_темы).

3) Создаем в этой папке новую папку с именем «js». Если такая уже имеется в Вашей теме, то создавать не нужно.

4) Загружаем в эту папку скачанный ранее файл (файл, а не архив).

Вот и все, первая часть работы выполнена.

Теперь проходим в админку сайта. Раздел «Внешний вид» —> «Редактор». Ищем файл header.php. В нем ПЕРЕД вставляем следующий код (если у Вас уже подключен jquery, то можно не вставлять данный код):

Обновляем файл header.php.

Теперь ищем файл footer.php. ПЕРЕД ставим такой код:

 Вверх

Не забываем изменить ссылку на свою. Меняем example.com на адрес своего сайта. ИМЯ_ВАШЕЙ_ТЕМЫ — на имя папки с темой, в которой есть папка js. Перед вставкой данного кода ОБЯЗАТЕЛЬНО пройдите по данной ссылке http://example.com//wp-content/themes/ИМЯ_ВАШЕЙ_ТЕМЫ/js/script.js. Просто введите в адресную сроку браузера и посмотрите что выдаст. Вы должны увидеть javascript-код. Если кода нету, проверьте ссылку.

Проверили все? Двигаемся дальше.

Вариант №2

Если выполнили первый вариант, этот не выполняйте.

Данный вариант хуже, потому как наш javascript-код будет не в отдельном файле, а в заголовке, что не есть good.

1. Идем в админку Вашего сайта.
2. Переходим в раздел «Внешний вид» —> «Редактор».
3. Ищем файл header.php
4. ПЕРЕД тегом вставляем следующий код:

$(function() {

$(window).scroll(function() {

if($(this).scrollTop() != 0) {

$('#goTop').fadeIn();

} else {

$('#goTop').fadeOut();

}

});

$('#goTop').click(function() {

$('body,html').animate({scrollTop:0},800);

});

});

Не забываем обновить файл.

Теперь ищем файл footer.php. ПЕРЕД ставим такой код:

 Вверх

Не забываем изменить ссылку на свою. Меняем example.com на адрес своего сайта. ИМЯ_ВАШЕЙ_ТЕМЫ — на имя папки с вашей темой, в которой есть папка js. Перед вставкой данного кода ОБЯЗАТЕЛЬНО пройдите по данной ссылке http://example.com//wp-content/themes/ИМЯ_ВАШЕЙ_ТЕМЫ/js/script.js. Просто введите в адресную сроку браузера и посмотрите что выдаст. Вы должны увидеть javascript-код. Если кода нету, проверьте ссылку.

Проверили все? Двигаемся дальше.

Действие №2 – CSS

1. Идем «Внешний вид» —> «Редактор».
2. Ищем файл style.css (открыт сразу при входе в редактор).
3. В конце файла style.css вставляем следующий код:

#goTop {
width: 100px;
border-radius: 10px;
box-shadow: 0px 0px 3px #252525;
background: #E9E9E9;
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
display: none;
color: #444444;
font-size: 13px;
}

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

Если хотите сделать свой стиль кнопки «Вверх», то вот Вам тот же CSS-код, но уже с комментариями:

#goTop {
width: 100px;/*Ширина кнопки в пикселах*/

border-radius: 10px;/*Радиус округления углов у кнопки. Поставьте 0 или вовсе удалите, если не нужны круглые углы*/

box-shadow: 0px 0px 3px #252525;/*Тень кнопки. 1 значание - смещение по горизонтали, 2 - по вертикали, 3 - радиус размытия, 4 - цвет тени*/

background: #E9E9E9;/*Цвет фона кнопки*/

text-align: center;/*Выравнивание текста*/

padding: 5px;/*Внутренние отступы*/

position: fixed;/*Позиционирование НЕ ТРОГАЙТЕ ЭТО СВОЙСТВО, ИНАЧЕ КНОПКА БУДЕТ РАБОТАТЬ НЕПРАВИЛЬНО!*/

bottom: 10px;/*Отступ снизу*/

right: 10px;/*Отступ справа*/

cursor: pointer;/*Вид курсора при наведении на кнопку*/

display: none;/*Определяет как будет показан элемент в документе НЕ ТРОГАЙТЕ ЭТО СВОЙСТВО, ИНАЧЕ КНОПКА БУДЕТ РАБОТАТЬ НЕПРАВИЛЬНО!*/

color: #444444;/*Цвет текста*/

font-size: 13px;/*Размер шрифта текста кнопки*/
}

Все благ.