Приветствую, друзья! В этой статье я хочу показать Вам как можно сделать кнопку «Вверх» на сайте. Такая кнопка будет полезна на сайтах с длинными статьями или страницами. При нажатии на кнопку «Вверх» — страница возвратится вверх, к главному меню (шапке сайта).
Обычно для установки такой кнопки все хотят скачать как можно быстрее плагин и особо не заморачиваются, но я не думаю что нужно захламлять сайт кучей ненужных плагинов, когда можно все сделать очень легко и просто без использования плагинов.
Самые ленивые могут создать такую кнопку с помощью многих плагинов, к примеру 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 )
Если у вас что-то не получилось, смело пишите в комментариях! А если получилось — делитесь впечатлениями 🙂
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Норм совет, взял на вооружение
Спасибо за статью! только у меня не пойму почему не отображается картинка, но сама кнопка работает.
Путь проверяла — правильный
Видимо, нужно обязательно помещать картинку в папку uploads. А я помещала в другую (путь прописывала соответствующий), но нет…. А когда поместила в uploads и перепрописала путь, то всё ОК! Спасибо
С изображением получается, а вставить просто текст — нет никакого изображения, ни кнопки, ни текста.
причём, если вставлять точно весь текст, то сайт вообще перестаёт открываться, сообщает, что ошибка.
Кнопка почему-то срабатывает только с подвала, если выше — не работает
https://pokleyka.net/odessa/
После вставки кода вылезла ошибка при сохранении. Код удалила, обновила. И теперь под подвалом вылезло вот это существо.
https://prnt.sc/qonamu
Как его убрать?))
Всё просто и легко, спасибо.
а как зафиксировать кнопку в конкретном месте сайта? очень надо поставить в текст….
Я так понимаю 12, 13 строки, меняйте цифровые значения
Я воспользовалась вашей статьёй года 2 назад, спасибо! Но недавно обратила внимание, что картинка кнопки Вверх не отображается, когда это произошло не знаю. Все остальные картинки — норм. Пробовала перемещать картинку в другие папки, меняла картинку, название…. ничего не помогло, но и без отсутствия картинки кнопка, если на неё нажать работает. Если меняю изображение на слово «ВВЕРХ», слово отображается. В чём может быть причина???