Как сделать кнопку вверх на wordpress

Кнопка «вверх» на сайте — вещь очень полезная,особенно, если статья очень длинная, но к сожалению присутствует не во всех темах wordpress. Если она у вас отсутствует и вам очень нужна, то покажу как ее сделать без плагина, так как ничего сложного тут нет. Так-же порекомендую и плагины в конце поста.

И так, в редакторе тем открываем файл «Подвал (footer.php)«. Вставляем в него этот кусок кода:

<script type="text/javascript">
jQuery(function($)
 {
var $scroll_btn = $(".js-scrolltop");

    $scroll_btn.click(function () {
        return $("body,html").animate({
            scrollTop: 0
        }, 500);
    });
});
	</script>
<button type="button" class="scrolltop js-scrolltop">Наверх</button>

В разных шаблонах вордпресс футер сделан по разному, поэтому однозначного места для нашего кода нет. Попробуйте вставить перед закрывающим тегом </body> или в самом начале файла, нужно поэкспериментировать.

Далее откроем «Таблица стилей (style.css)» и добавим стилей. Для этого в самый конец файла вставим следующий код:

.scrolltop {
  padding: 20px;
  position: fixed;
  bottom: 40px;
  right: 100px;
  border: none;
  background: #dcdbdb;
  text-align: center;
}

Цвет кнопки вы можете поменять в строчке background: #dcdbdb;

Теперь о плагинах. Посоветую парочку легких — это «jQuery Smooth Scroll«, который совсем не требует настроек и «Simple Back To Top«, в котором можно изменить значок кнопки.

Поделиться ссылкой: