Microsoft Excel

Кнопка вверх WordPress — лучшие плагины. Кнопка Вверх для WordPress — быстрый переход в начало страницы Плагин JCWP Scroll To Top

Все, что требуется от вебмастера – это чтобы его сайт был удобным, чтобы пользование им не вызывало депрессию у посетителей, и шаблон не мешал юзерам спокойно изучать материалы ресурса. Если вы будете использовать не измененную тему Вордпресс, скорее всего, у вас не получится сделать удобный сайт, так как по умолчанию кнопки для WordPress не устанавливаются – их нужно дополнительно скачивать и активировать. Ведь чтобы пользователь мог удобно читать статьи и листать содержимое, на сайте обязательно должна быть кнопка “Вверх”.

Кнопка “Наверх” – это небольшой значок-стрелочка, при нажатии на который страница быстро прокручивается вверх.

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

jQuery Smooth Scroll – это удобный и быстрый модуль для активации кнопки “Вверх” на сайте. Чтобы добавить на ресурсе такую кнопку, достаточно скачать и установить плагин. Сразу после активации сбоку страниц появляется небольшая плавающая кнопка. С ней читать длинные статьи и листать страницу будет куда проще. Кнопка имеет стильный дизайн, и не потеряется на фоне шаблона Вордпресс.

А если вы знаете особенности CSS языка программирования, то сможете самостоятельно настроить кнопку “Вверх” по собственному усмотрению. В целом, плагина jQuery Smooth Scroll достаточно, чтобы удовлетворить потребности большинства вебмастеров, но далее будут рассмотрены еще несколько популярных инструментов на случай, если этот модуль у вас не сработает.

Smooth Scroll Up

Далее следует не менее популярный плагин Smooth Scroll Up – это предельно простой и понятный инструмент, что в считанные минуты позволит создать иконку “Наверх” в боковой части сайта. Хотя в модуле и нет множества настроек, он весьма функционален. Далее указаны основные особенности плагина Smooth Scroll Up:

  • можно выбирать между разными типами элемента “Вверх” (текст с ссылкой, значок, изображение и так далее);
  • элемент прокрутки вверх можно выбирать самостоятельно из собственной коллекции;
  • можно добавлять собственный комментарий около кнопки прокрутки наверх;
  • расположение элемента на сайте регулируется (если она нужна, только чтобы удобно читать страницу, то лучше размещать в правой части, но плагин позволяет расположить ее в левой стороне, и по центру);
  • можно добавлять исключения для отображения в разных частях сайта (отключить отображение кнопки “Наверх” на главной, либо дезактивировать на любой другой странице);
  • модуль работает и на мобильных версиях сайта (по надобности, для телефона кнопку “Вверх” можно убрать);
  • есть анимации для прокруток (slide и fade, либо без анимационного эффекта);
  • можно указать расстояние, после которого кнопка “Вверх” появится (так удобнее читать, ведь элемент не будет бестолку появляться сразу после захода на сайт, а отобразиться только в нужный момент);
  • в кнопку “Наверх” можно заложить ссылку для открытия страницы в новой вкладке;
  • есть возможность добавить собственные параметры CSS для элемента.
WPFront Scroll Top

Этот плагин отлично подойдет для тех, кто не желает самостоятельно думать над тем, какой будет кнопка. Если вы просто хотите, что пользователям было проще читать и просматривать материалы, и при этом иметь интересную кнопку прокрутки, то WPFront Scroll Top – как раз то, что вам нужно. Модуль содержит крупную коллекцию готовых иконок. А если не хотите разбавлять внимание пользователя иконкой “Далее”, то можете просто добавить текст для прокрутки без изображения.

Плагин WPFront Scroll Top легко устанавливается на движок Вордпресс. Он содержит массу настроек, таких как:

  • активация/дезактивация кнопки;
  • размер иконки;
  • степень прозрачности;
  • скорость прокрутки;
  • добавление автоматического скрытия кнопки через заданное количество секунд;
  • пропись тега Alt для элемента;
  • цвет и фоновое оформление текста кнопки (главное – чтобы читать надпись было удобно, она должна быть выразительной).

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

Scroll Back To Top

Далее еще один плагин, который улучшит “юзабилити” вашего ресурса – инструмент Scroll Back To Top. Он также содержит множество параметров настройки. Вы сможете в любой момент деактивировать элемент, сделать его непрозрачным или создать превью иконки. Размер и цвет элемента легко регулируются. Можно настраивать расстояние от “топа” сайта, после прохождения которого появляется кнопка. Расположение элемента в левой, правой части и по средине страницы.

Плагин Scroll Back To Top не содержит большого количество типов икон. Всего их около 10. По надобности можно отключить иконку и оставить один только текст (“Далее”, “Вверх” и т. п.). Размер иконок регулируется по специальной шкале от одного до шести. Для активации индивидуального стиля в параметрах элемента есть пункт “Extra CSS” для добавления собственного дизайна.

Dynamic “To Top” Plugin

Это английский модуль для размещения кнопки “Наверх” практически в любом положении на сайте. С ним читать и листать страницу будет куда проще, ведь кнопка может быть размещена в одном из четырех положений. Плагин настраивается на английском языке. Кнопка может быть активирована/отключена для мобильной версии ресурса. Скорость прокрутки регулируется.

Что интересно, плагин Dynamic “To Top” Plugin работает с кэшированием, потому постоянные пользователи смогут читать ваши посты и прокручивать страницы без промедлений работы браузера. Модуль прекрасно отображается на компьютерах и нового, и старого поколения.

Skysa Scroll-to-Top App

Далее следует Skysa Scroll-to-Top App – плагин, который абсолютно не похож на своих конкурентов. Вы не просто добавите при помощи него кнопку “Наверх”, но и сможете воспользоваться этим инструментом для создания целого бара виджетов. К примеру, можно добавить плавающий блок с голосованиями, кнопками социальных сетей и элементом прокрутки страницы. А чтобы плагин не тормозил работу сайта, он работает с кэшем браузеров. Возможности данного модуля практически не ограничены – вы даже сможете добавить ссылки в бар с кнопкой прокрутки.

Вывод

Скачать одно из указанных дополнений – это ничего не стоит для вас. Зато для сайта это принесет огромную пользу. Кнопки “Далее”, “Наверх”, “Назад” и т. д. значительно облегчат жизнь посетителям ресурса. Поверьте, они будут благодарны! А вместе с ними – и поисковые машины, так как чем сайт удобней, тем выше его позиции в поиске.

Приветствую, друзья! В этой статье я хочу показать Вам как можно сделать кнопку «Вверх» на сайте. Такая кнопка будет полезна на сайтах с длинными статьями или страницами. При нажатии на кнопку «Вверх» — страница возвратится вверх , к главному меню (шапке сайта).

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

Самые ленивые могут создать такую кнопку с помощью многих плагинов, к примеру Scroll to Top или WP Scroll To Top 😉

Вспомнить как можно найти и установить плагин Вы можете в одном из .

Создание кнопки «Вверх» без плагинов

Установить кнопку можно очень просто, всего за несколько простых шагов.

1. Откройте файл function.php .

Открыть function.php можно двумя способами:

  • Открыть с помощью текстового редактора в корневой папке вашей темы
  • Перейти в Внешний вид -> Редактор и выбрать для редакции Функции темы (functions.php)

2. Скопируйте и вставьте код ниже в самом низу, перед закрывающим тегом ?> .

Gif" />"; } add_action("wp_head", "back_to_top_style"); function back_to_top_style() { echo " #totop { cursor:pointer; position: fixed; right: 30px; bottom: 30px; display: none; outline: none; } "; } add_action("wp_footer", "back_to_top_script"); function back_to_top_script() { echo " jQuery(document).ready(function($){ $(window).scroll(function () { if ($(this).scrollTop() > 400) $("#totop").fadeIn(); else $("#totop").fadeOut(); }); $("#totop").click(function () { $("body,html").animate({ scrollTop: 0 }, 800); return false; }); }); "; }

3. Сохраните изменения и любуйтесь созданной вами кнопкой «Вверх» .

А сейчас, предугадывая Ваши вопросы, постараюсь заранее на них ответить!

И так, в данном примере мы поставили изображение на кнопку. Для того чтобы убрать изображение и поставить текст — замените в коде нашего примера строчку 3 на:

Echo "Вверх";

Для того чтобы заменить изображение кнопки — замените ссылку на нужное вам изображение в строчке 3.

Кнопка будет отображаться тогда, когда на странице мы опустимся более 400 пикселей вниз от шапки сайта, и будет прятаться если мы поднимемся выше. Изменить высоту при которой кнопка будет появляться достаточно легко, для этого нужно заменить значение 400 на нужную вам высоту вэтой строчке кода:

If ($(this).scrollTop() > 400)

Если у вас что-то не получилось, смело пишите в комментариях! А если получилось — делитесь впечатлениями 🙂

Приветствую, друзья! В этой статье я хочу показать Вам как можно сделать кнопку "Вверх" на сайте. Такая кнопка будет полезна на сайтах с длинными статьями или страницами. При нажатии на кнопку "Вверх" - страница возвратится вверх, к главному меню (шапке сайта). Обычно для установки такой кнопки все хотят скачать как можно быстрее плагин и особо не заморачиваются, но я не думаю что нужно захламлять сайт кучей ненужных плагинов, когда можно все сделать очень легко и просто без использования плагинов. Самые ленивые могут создать такую кнопку с помощью многих плагинов, к примеру Scroll to Top или WP Scroll To Top ;) Вспомнить…

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

Вот такие web-ресурсы и получают весомое преимущество не только в виде растущей целевой аудитории, но и в виде увеличивающегося трафика с поисковых систем, так как поисковики уделяют огромное внимание поведению пользователей ( о влиянии поведенческих факторов). К чему это я все говорю? А все к тому, что мелочей в продвижении сайта нет, как бы банально это ни звучало.

К примеру, та же кнопка наверх (вверх) для сайта . Казалось бы, мелочь, недостойная внимания, но она вносит свою лепту в повышение юзабилити сайта. Если еще не догадались, о чем речь, обратите внимание, как на моем блоге при прокрутке страницы вниз появляется с правой стороны кнопка в виде стрелки, направленной вверх, при нажатии на которую можно вернуться назад в верхнее положение.

Как создать кнопку наверх с помощью скрипта

Теперь разберем подробнее, как можно реализовать нашу задумку, причем предложу несколько вариантов, каждый из которых имеет свои плюсы. Для начала хотелось бы отметить, что для пользователей уже давно существует возможность быстро прокручивать любую страницу, причем практически в любом браузере. Для этого достаточно воспользоваться кнопками «Page Up» и «Page Down» на клавиатуре компьютера.

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

Простая кнопка вверх для блога или сайта

Вначале хочу предложить иконку наверх простую и без изысков, установить которую можно просто без проблем. Для этого необходимо открыть на редактирование файл footer.php темы WordPress, который, как известно, отвечает за отображение в браузере нижней части web-страницы, называемой футером (или подвалом). Перед закрывающим тегом body надо вставить вот такой код:

Напомню, что редактировать файлы удобнее всего с помощью notepad plus plus ( об этом замечательном HTML, PHP и CSS редакторе подробнее). Для того, чтобы определить местоположение и вид значка «Наверх», зададим свойства CSS для соответствующего идентификатора (id) gotop:

#gotop { position: fixed; bottom: 60px; margin-left: 1170px; border: 2px solid #BBB9C0; text-align: center; color: #4F487E; text-decoration: none; font-size: 24px; }

Копируем и заносим эти свойства в файл style.css темы WordPress (). В результате в правом нижнем углу должно появиться изображение кнопки «Наверх», которое будет иметь такой вид:


Можно применять для этих целей уже встроенные аналогичные инструменты во всех других популярных браузерах: Opera ( об этом браузере подробнее), Internet Explorer ( об обозревателе IE), Google Chrome ( о Хроме статья). Чтобы поднять саму картинку, скажем, вверх, нужно увеличить значение свойства bottom, чтобы сместить влево, необходимо уменьшить параметр CSS свойства margin-left. Ну, и так далее.

Кнопка вверх на сайте с плавной прокруткой

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

Причем, для реализации этого варианта создания кнопки наверх все предложенные способы, которые мне удалось обнаружить в интернете, предполагают использование библиотеки jQuery, к которой необходимо подключиться. По некоторым причинам мне хотелось этого избежать и в конце концов я нашел желаемый способ решения этой проблемы. Небезызвестный админ WP-Kama предложил свой код на JavaScript, который дает возможность осуществить плавную прокрутку вэб-страницы сайта вверх и появление-исчезновение самой «кнопки наверх» без использования jQuery. Предварительно необходимо создать на сервере файл с расширением.js (например, totop.js) и вставить в него следующий кусок:

(function() { function $(id){ return document.getElementById(id); } function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 12; var dx = 0; var dy = 0; var bx = 0; var by = 0; var wx = 0; var wy = 0; if (document.documentElement) { dx = document.documentElement.scrollLeft || 0; dy = document.documentElement.scrollTop || 0; } if (document.body) { bx = document.body.scrollLeft || 0; by = document.body.scrollTop || 0; } var wx = window.scrollX || 0; var wy = window.scrollY || 0; var x = Math.max(wx, Math.max(bx, dx)); var y = Math.max(wy, Math.max(by, dy)); var speed = 1 + acceleration; window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); if(x > 0 || y > 0) { var invokeFunction = "top.goTop(" + acceleration + ", " + time + ")" window.setTimeout(invokeFunction, time); } return false; } //* function scrollTop(){ var el = $("gotop"); var stop = (document.body.scrollTop || document.documentElement.scrollTop); if(stop>400){ if(el.style.display!="block"){ el.style.display="block"; smoothopaque(el, 0, 100, 1); } } else el.style.display="none"; return false; } // Плавная смена прозрачности function smoothopaque(el, startop, endop, inc){ op = startop; // Устанавливаем прозрачность setopacity(el, op); // Начинаем изменение прозрачности setTimeout(slowopacity, 1); function slowopacity(){ if(startop endop){ setTimeout(slowopacity, 1); } } setopacity(el, op); }; }; // установка opacity function setopacity(el, opacity){ el.style.opacity = (opacity/100); el.style.filter = "alpha(opacity=" + opacity + ")"; }; if (window.addEventListener){ window.addEventListener("scroll", scrollTop, false); window.addEventListener("load", scrollTop, false); } else if (window.attachEvent){ window.attachEvent("onscroll", scrollTop); window.attachEvent("onload", scrollTop); } window["top"] = {}; window["top"]["goTop"] = goTop; })();

Скорее всего, в корневой папке вашего блога или web-сайта на хостинге (чаще всего это public_html) имеется директория js с файлами JavaScript. Там и создаете файл totop.js с помощью уже упомянутой мной программы notepad++, вставив в него этот код. Таким образом, полный путь до свежеиспеченного файла у меня получился таким:

/themes/cloudy/js/totop.js">

Теперь нужно создать изображение для “кнопки вверх”. Для этого можно использовать любой графический редактор, включая просмотрщик фотографий FastStone Image Viewer ( об этой интересной программе детальный мануал). Также можно использовать для этих целей, например, Fotoshop, в том числе версию онлайн приложений, коих в интернете немало.

Понимаю, что у некоторых неискушенных читателей могут возникнуть некоторые сложности при желании заполучить красивую кнопку наверх, которая к тому же еще бы и вписалась в дизайн. Поэтому в одной из ближайших публикаций уделю на это время и подробно объясню, как я создал подобную иконку в виде стрелки вверх для своего блога в онлайн Фотошопе . Пока же представляю готовый результат в виде спрайта, включающего два рисунка:

Объясню вкратце, что объединение фоновых картинок сайта в спрайты (по англ. sprite - фея, призрак) дает возможность сократить число http запросов, тем самым внести определенную лепту в благородное дело уменьшения нагрузки на сервер. В данном случае создание спрайта из двух стрелок обеспечивает изменение вида изображения при подведении к нему курсора мышки, то есть возникает анимационный эффект.

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

Итак, будем считать, что рисунок стрелки «наверх» готов (кстати, стрелку можно заменить на другую картинку, например, в виде красивой кнопки). Далее загружаем изображение на сервер опять же в корень сайта (обычно там уже имеется папка IMAGES). Для этих целей советую использовать программу FileZilla ( пост об этом ФТП клиенте), который очень удобен при перемещении и работе с изображениями, или другой подобный софт. У меня абсолютный путь до изображения с двумя стрелками получился следующим:

/images/totop.png

Однако, для url картинки, которая выводится с помощью средств CSS, можно использовать и относительный путь:

/images/totop.png

Применяйте как абсолютный, так и относительный адрес, разницы нет. Имейте ввиду, что у вас полный URL может быть другим. Внимательно исследуйте вложенность папок, которые и определяют содержание пути. Следующим шагом открываем файл footer.php и вставляем в него в самый конец перед закрывающим тегом body такую конструкцию:

Не забудьте вместо «путь_до_файла» вставить последовательность всех папок, определяющих URL именно для вашего проекта. И последний шаг. Нужно определить стили CSS, которые следует внести в файл style.css темы Вордпресс. Предлагаю свой вариант:

#gotop { position: fixed; bottom: 60px; width: 56px; height: 96px; margin-left: 1170px; background: url(путь_до_файла/totop.png) no-repeat 0 0; }

И здесь при описании свойства background не забудьте в качестве значения url указать путь до файла totop.png (абсолютный или относительный). Имейте ввиду, что абсолютный путь должен начинаться с «http://». Для того, чтобы обеспечить смену вида кнопки при подведении к ней курсора, пропишем еще одно условие в тот же файл style.css:

#gotop:hover { background: url(/путь_до_файла/totop.png) no-repeat -56px 0; }

Но последнее правило CSS нужно вносить только в случае, если вы решили использовать спрайт. В случае одинарного изображения его прописывать не надо. Теперь при прокрутке страницы вниз кнопка наверх будет постепенно появляться, при наведении на нее курсора будет менять свой вид (кроме случая, когда загружена одиночная картинка) и после нажатия на нее вэб-страница будет возвращаться в верхнее положение, причем прокрутка будет плавная. В заключение немного музыкальной ностальгии:

Здравствуйте, дорогие читатели сайт! Представляю Вам и Вашему вниманию новый пост, в котором я расскажу о том для чего нужна кнопка «Наверх» и как её установить на WordPress. Ну в начале, как всегда, объясню для чего эта кнопка вообще нужна и стоит ли ее ставить. Приступаем!

Для чего нужна кнопка Наверх?

К примеру, Вы написали длинную статью, пользователь дочитал ее до конца и теперь хочет вернуться обратно в начало. Думаю знакомая ситуация. Не правда ли? А крутить колесиком мыши и «тянуть» за ползунок — не очень удобно и долго.

Именно поэтому и была создана данная функция — поднятие страницы наверх. А еще, если красиво оформить кнопку, то это плюс к дизайну! А если еще модифицировать, то можно будет при нажатие отпускать страницу вниз, т.е. наоборот. Вот так вот.

Поднятие страницы можно осуществить как с помощью плагина, так и без него. Я сейчас объясню, и тот, и другой. Так что будьте внимательны.

Установка кнопки с плагином

Первое что нужно сделать, это и активировать его. После чего кнопка начнет работать. Но, изображение кнопки будет стандартное. Советую Вам изменить ее, на свою. Для это:

  • Перейдите во вкладку «Параметры»
  • —> Scroll to Top
  • И выберите облик кнопки из предложенных или загрузите свою
  • Нажмите кнопку «Update Options»
  • Готово! Кнопка наверх для WordPress приняла новый облик
  • Вот так. Так же можно настроить ее, а именно:

    • Расположение
    • Отступы
    • Скорость
    • и другое
    Кнопка «Наверх» без плагина

    Сейчас мы рассмотрим как сделать кнопку наверх для wordpress не используя посторонних плагинов. Почему без плагина? А потому, что плагины замедляют работу сайта. Я уже не один раз об сказал (В статье — Добавляем видео на WordPress) и буду говорить еще и еще.

    Для того, чтобы сделать кнопку следуйте инструкции ниже:

    1. Откройте файл footer.php , который находится в папке с шаблоном, и вставьте перед код:

    Только внесите некоторые изменения, а именно:

    • где написанно ваш_сайт.ru — напишите адрес вашего сайта
    • где путь к картинке — введите путь до картинке, которая будет кнопкой
    • где картинка — название картинке. Если не.jpg, то измените на тот формат, который установлен на картинке.

    2. Откройте файл style.css , который так же находится в папке с шаблоном, и в самом конце вставьте следующий код:

    #toTop { width: 100px; text-align: center; padding: 5px; position: fixed; bottom: 10px; right: 10px; cursor: pointer; color: #666666; text-decoration: none;}

    3. Скачайте и распакуйте его. В нем лежит файл verx.js , который нужно закинуть в корень Вашего сайта.

    4. Откройте файл functions.php , находящийся в папке с шаблоном и вбейте туда код:

    // smart jquery inclusion if (!is_admin()) { wp_deregister_script("jquery"); wp_register_script("jquery", ("//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false); wp_enqueue_script("jquery"); }

    5. Ну вот и все! Я могу Вас поздравить, теперь на Вашем сайте есть кнопка наверх для wordpress.

    Вы только что прочли статью «Кнопка Наверх для WordPress» и установили ее себе. Какие впечатления? Пишите в комментариях! На этом у меня все, всем пока.

    С уважением, Константин Белан.

    Здравствуйте, уважаемые читатели.В этой статье я расскажу вам, как установить кнопку “вверх ” для блога WordPress. Сделать эту кнопочку можно двумя способами. Первый способ заключается в установке специального плагина. А второй, в изменении php кода в файлах вашей активной темы.

    По большому счету, можно с легкостью обойтись и без этой кнопки. Эта кнопка уже у вас есть на клавиатуре, называется она “home ” . Нажав которую, вы быстро переместитесь на начало страницы.


    Многие веб-мастера устанавливают на свой сайт эту кнопку. Кто-то ставит ее для более удобной навигации пользователей по сайту, а для кого-то, это неотъемлемая часть дизайна.

    1.Установка кнопки при помощи плагина.

    Самый простой способ сделать кнопку вверх, это установить и активировать плагин. Скачать его можно с официального хранилища плагинов на сайте wordpress.org . Я рекомендую качать плагины только оттуда, так у вас будет меньше шансов заразить свой сайт вирусом.

    Есть много плагинов которые позволяют добавить кнопку наверх, но я решил в качестве примера выбрать плагин Scroll Back To Top. Скачайте его , загрузите и активируйте.

    Плагин имеет целый ряд настроек. Но всё трогать не обязательно. Достаточно настроить расположение и вид кнопки.

    Как вы видите, нет ничего сложного в том, чтобы подключить кнопку наверх при помощи плагина, скачал, активировал и все работает. Куда еще проще? Но на самом деле не все так хорошо, как выглядит на первый взгляд. Дело в том, что с каждым установленным плагином, ваш WordPress становится более толстым и тормозным, что не есть хорошо. Поэтому многие опытные блогеры, при любой возможности стараются не пользоваться плагинами, а править код на прямую.