На многих сайтах встречается длинный контент, и когда пользователь доходит до его низа, возникают затруднения с быстрым возвратом к началу страницы. Ведь листать вверх длинную статью может быть неудобно, особенно на мобильных устройствах.
Давайте сделаем жизнь наших посетителей приятнее и добавим кнопку вверх для 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)...