Создаем кнопку «наверх»

Кнопку наверх сделать не сложно, стоит придерживаться инструкции. Мы написали код, сейчас разберем его составляющие. Разделим конфигурацию на три кода, первый – тег button. Внутри тега атрибут class и текст, выводимый на блоге. Вставляем в файл темы WordPress на то место, где хотим его видеть, например, правый нижний угол, тогда записываем код в файл footer активной темы перед закрывающим тегом body.

<button type="button" class="scrolltop js-scrolltop">Наверх</button>

Следующая запись это JS код, вставляем так же перед закрывающим тегом body, все скрипты должны располагаться в подвале сайта. Не забываем нажать Обновить.

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

    $scroll_btn.click(function () {
        return $("body,html").animate({
            scrollTop: 0
        }, 500);
    });
});
	</script>

Третий код это CSS стили, подобрали нейтральный синий цвет. Вставляем в файл style.css активной темы WordPress.

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

Если сделали по инструкции, то на сайте появится кнопка с надписью наверх.

Надпись “наверх” меняется в первом разделе в теге button, а оформление в стилях. Если в текстом не понятно, то предлагаю к просмотру видео.

Заканчиваю статью, разобрались как сделать кнопку, ведущую вверх страницы в CMS WordPress,  успехов!