Приветствую, друзья! В этой статье я хочу показать Вам как можно сделать кнопку «Вверх» на сайте. Такая кнопка будет полезна на сайтах с длинными статьями или страницами. При нажатии на кнопку «Вверх» — страница возвратится вверх, к главному меню (шапке сайта).
Обычно для установки такой кнопки все хотят скачать как можно быстрее плагин и особо не заморачиваются, но я не думаю что нужно захламлять сайт кучей ненужных плагинов, когда можно все сделать очень легко и просто без использования плагинов.
Самые ленивые могут создать такую кнопку с помощью многих плагинов, к примеру Scroll to Top или WP Scroll To Top 😉
Вспомнить как можно найти и установить плагин Вы можете в одном из прошлых уроков.
Создание кнопки «Вверх» без плагинов
Установить кнопку можно очень просто, всего за несколько простых шагов.
1. Откройте файл function.php.
Открыть function.php можно двумя способами:
- Открыть с помощью текстового редактора в корневой папке вашей темы
- Перейти в Внешний вид -> Редактор и выбрать для редакции Функции темы (functions.php)
2. Скопируйте и вставьте код ниже в самом низу, перед закрывающим тегом ?>.
add_action( 'wp_footer', 'back_to_top' ); function back_to_top() { echo '<img id="totop" src="https://wp-lessons.com/wp-content/uploads/2015/04/scroll-to-img.gif" />'; } add_action( 'wp_head', 'back_to_top_style' ); function back_to_top_style() { echo '<style type="text/css"> #totop { cursor:pointer; position: fixed; right: 30px; bottom: 30px; display: none; outline: none; } </style>'; } add_action( 'wp_footer', 'back_to_top_script' ); function back_to_top_script() { echo '<script type="text/javascript"> jQuery(document).ready(function($){ $(window).scroll(function () { if ( $(this).scrollTop() > 400 ) $("#totop").fadeIn(); else $("#totop").fadeOut(); }); $("#totop").click(function () { $("body,html").animate({ scrollTop: 0 }, 800 ); return false; }); }); </script>'; }
3. Сохраните изменения и любуйтесь созданной вами кнопкой «Вверх».
А сейчас, предугадывая Ваши вопросы, постараюсь заранее на них ответить!
И так, в данном примере мы поставили изображение на кнопку. Для того чтобы убрать изображение и поставить текст — замените в коде нашего примера строчку 3 на:
echo '<a id="totop" href="#">Вверх</a>';
Для того чтобы заменить изображение кнопки — замените ссылку на нужное вам изображение в строчке 3.
Кнопка будет отображаться тогда, когда на странице мы опустимся более 400 пикселей вниз от шапки сайта, и будет прятаться если мы поднимемся выше. Изменить высоту при которой кнопка будет появляться достаточно легко, для этого нужно заменить значение 400 на нужную вам высоту в этой строчке кода:
if ( $(this).scrollTop() > 400 )
Если у вас что-то не получилось, смело пишите в комментариях! А если получилось — делитесь впечатлениями 🙂
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Все норм, спасибо! Вот только когда хочу просто текст сделать ошибку выявляет
Пожалуйста, рад что пригодилось 😉
Для текста попробуйте вот так:
Данный пример только что проверил и он работал.
сделал как вы описывали в первом примере, поменял 3 строчку и у меня сайт «слетел», что теперь делать..?
Удалите через ftp все что добавили и убедитесь что не допустили ошибки.
Отлично! Спасибо еще раз!
Вроде бы все работает, но кнопка вверх активна только в самом низу страницы, появляется она как и положенно по параметрам, но кликабельна только внизу страницы, а именно в подвале! В моей теме была стандартная кнопка такая, но она работал только когда опускаешься до подвала, я удалил код старой кнопки вверх из footer.php! Надеюсь Вы меня поняли и сможете мне помочь, чуть не забыл моя тема называется fruitful
Добавьте в CSS стили:
Помогло) спасибо Вам большое! Если не секрет то комментарии на это сайте стандартные из темы? или плагин какой то?
Комментарии сделаны с помощью плагина VKontakte API.
добрый день! та же проблема, активна только внизу, в css стили добавил, не помогло((( подскажите как быть
Спасибо! Получилось, пока дошла до вашего сайта, попадались сложные скрипты, где нужно сделать кучу настроек в коде, спасибо вам»
Но появился вопрос, как сделать так, что бы кнопка было не в нижнем правом углу, а к примеру в верхнем правом углу 7?
Нужно просто заменить right на left, а bottom на top в CSS стилях. На всякий случай бросаю полный код:
Александр спасибо! Все гениальное просто!
Все получилось! Спасибо!!!
Спасибо! Очень круто и легко!
Крутоооооооооооооооооооооооооооооооооооооооооооооооооооооо ,спасибо долго искал
После этого сайт перестал работать.
У меня тег ?> находится в середине а не самом внизу
Вот так я вставил этот перед тегом ?>
add_action( ‘wp_footer’, ‘back_to_top’ );
function back_to_top() {
echo »;
}
add_action( ‘wp_head’, ‘back_to_top_style’ );
function back_to_top_style() {
echo ‘
#totop {
cursor:pointer;
position: fixed;
right: 30px;
bottom: 30px;
display: none;
outline: none;
}
‘;
}
add_action( ‘wp_footer’, ‘back_to_top_script’ );
function back_to_top_script() {
echo ‘
jQuery(document).ready(function($){
$(window).scroll(function () {
if ( $(this).scrollTop() > 400 )
$(«#totop»).fadeIn();
else
$(«#totop»).fadeOut();
});
$(«#totop»).click(function () {
$(«body,html»).animate({ scrollTop: 0 }, 800 );
return false;
});
});
‘;
}?>
котик прикольный
Сама безуспешно пыталась вставить кнопку, кучу запутанных способов из интернета перепробовала, и только с вашим наконец получилось. Код вставила сразу после открывающего тега <?, иначе не работало. Спасибо вам, Александр!!!
Рад, что смог помочь!
Здравствуйте, Александр. Ваша замечательная кнопочка у меня не появляется. Вроде всё сделала правильно. Скопировала код в файл function.php. Подключила библиотеку jQuery. Пробовала с вашим файлом и со своим — результат один — кнопки просто нет. Посоветуйте, пожалуйста, что мне сделать.
Молодец! Спасибо.
Премного благодарна! Все получилось с первого раза, сайт не слетал и вопросов не возникло =)
Котик восхитителен, но заменила его свой самолет ))
в третей строчке поменял на свою картинку echo »; выдает ошибку 404 на картинку, я не так путь прописываю?? src=»./images/top-button.png» , src=»../images/top-button.png», src=»images/top-button.png» писал по разному, всеравно нет картинки
»;
сам отвечаю на свой вопрос, вдруг кому поможет
echo »;
Работает хорошо, но на мобильной версии сайта смотрится несуразно. Я бы даже сказал страшно.
Круто! Отлично выглядит и замечательно работает )
Спасибо друг помогло!
Кнопка появилась но не стартует (((