На многих сайтах встречается длинный контент, и когда пользователь доходит до его низа, возникают затруднения с быстрым возвратом к началу страницы. Ведь листать вверх длинную статью может быть неудобно, особенно на мобильных устройствах.
Давайте сделаем жизнь наших посетителей приятнее и добавим кнопку вверх для WordPress. Она позволит вернуться к началу страницы всего одним нажатием. Еще одно преимущество — кнопка будет появляться по мере прокрутки страницы вниз, не мешая чтению. Так что давайте начнем и создадим эту удобную кнопку для нашего сайта WordPress и без плагина.
Добавляем кнопку вверх для WordPress
Наша кнопка «вверх» состоит из трех частей кода, которые можно подключить различными способами. Один из правильных методов — это использование функции wp_enqueue_script
для подключения скрипта в WordPress. Этот метод гарантирует правильную загрузку скрипта и предотвращает возможные конфликты с другими скриптами на сайте.
Подключаем скрипт
Поместите этот код в файл functions.php и обратите внимание, что функция get_stylesheet_directory_uri
указывает путь из дочерней темы.
//Скрипт кнопки вверх function ws_gotop_scripts() { wp_enqueue_script('gotop', get_stylesheet_directory_uri() . '/js/gotop.js', array('jquery'), '1.0', true); } add_action('wp_enqueue_scripts', 'ws_gotop_scripts');
Дальше вам нужно создать файл gotop.js и вставить в него скрипт кнопки «вверх».
jQuery(document).ready(function() { jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > 200) { jQuery('.scroll-to-top').addClass('show'); } else { jQuery('.scroll-to-top').removeClass('show'); } }); jQuery('.scroll-to-top').click(function() { jQuery('html, body').animate({scrollTop: 0}, 'slow'); }); });
Выводим кнопку «вверх» на сайте
Теперь нам остается вывести кнопку вверх на WordPress сайте. Для этого в файл footer.php вставьте этот код:
<div class="scroll-to-top"></div>
Добавить стили
И для того, чтобы все корректно и красиво отображалось, добавьте стили CSS кнопке в файл style.css.
/* Кнопка вверх */ .scroll-to-top { position: fixed; bottom: 90px; right: 90px; width: 45px; height: 45px; background: rgba(0,0,0,0.5); border-radius: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, background .4s; } .scroll-to-top:hover { background: rgba(0,0,0,0.7); } .scroll-to-top::before { content: ""; position: absolute; top: 19px; width: 10px; height: 10px; border-style:solid; border-color: #fff; border-width: 2px 0 0 2px; } .scroll-to-top::before { transform: rotate(45deg); } .scroll-to-top.show { opacity: 1; visibility: visible; }
Простое решение
Если не хотите возиться с созданием файла для скрипта, прописывать пути и прочее. Можно сделать так. Просто вставьте этот код в functions.php и добавьте стили, которые выше.
//Кнопка вверх function ws_top_top_scroll() { ?> <!-- кнопка вверх --> <div class="scroll-to-top"></div> <script> jQuery(document).ready(function() { jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > 200) { jQuery('.scroll-to-top').addClass('show'); } else { jQuery('.scroll-to-top').removeClass('show'); } }); jQuery('.scroll-to-top').click(function() { jQuery('html, body').animate({scrollTop: 0}, 'slow'); }); }); </script> <?php } add_action('wp_footer', 'ws_top_top_scroll');
А где папка images должна быть?
Создал в корневом, а стрелка не отображается.
Вот указан путь картинки (стрелка):
background:url(images/gotop.png) no-repeat;
Поместите стрелку в папку «images», которая находится в вашей теме с именем gotop в формате png.
Почему у меня картинка на главной страницы из-за скрипта пропала? С плагинами конфликтует?
Что за картинка и какой плагин?
Всё разобрался — в папку images установленной темы wordpress.
Подскажите пж. А как сделать, чтобы при нажатии не так быстро поднимала вверх? И ещё хотелось бы чтоб кнопка появилось медленно при спускания страницы вниз. Спасибо.
Вроде и так не плохо, но... Там скорость подъема зависит от расстояния шапки, чем дальше от нее тем быстрее скорость. Если нужно изменить, то замените нижнею строку на эту
$("html, body").animate({scrollTop: 0}, 5000)
(меняйте число 5000 на свое усмотрение).Эта строка
if ($(window).scrollTop() <= "900") $(scrollDiv).fadeOut("slow")
отвечает за расстояние появления кнопки (900px)...