Кнопка вверх WordPress — легко и быстро

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

Давайте сделаем жизнь наших посетителей приятнее и добавим кнопку вверх для 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');
7 комментариев
  1. А где папка images должна быть?

    Создал в корневом, а стрелка не отображается.

    1. Вот указан путь картинки (стрелка):

      background:url(images/gotop.png) no-repeat;

      Поместите стрелку в папку «images», которая находится в вашей теме с именем gotop в формате png.

      1. Почему у меня картинка на главной страницы из-за скрипта пропала? С плагинами конфликтует?

  2. Подскажите пж. А как сделать, чтобы при нажатии не так быстро поднимала вверх? И ещё хотелось бы чтоб кнопка появилось медленно при спускания страницы вниз. Спасибо.

    1. Вроде и так не плохо, но... Там скорость подъема зависит от расстояния шапки, чем дальше от нее тем быстрее скорость. Если нужно изменить, то замените нижнею строку на эту

      $("html, body").animate({scrollTop: 0}, 5000) (меняйте число 5000 на свое усмотрение).

      Эта строка if ($(window).scrollTop() <= "900") $(scrollDiv).fadeOut("slow") отвечает за расстояние появления кнопки (900px)...

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *