Hostenko лучший WordPress хостинг
размещение статей на сайте поможет заработать

Главная » Создание Wordpress блога » Настройка Wordpress блога » Кнопка вверх (Back to top) без плагинов для WordPress

Кнопка вверх (Back to top) без плагинов для WordPress

knopka-vverx-basc-to-top

Необходимость добавлять на страницы блога WordPress специальной кнопки «вверх» или «вack to top», при нажатии на которую страница прокручивается к началу, появилась и существует в среде вебмастеров вот уже несколько лет. Как правило, данную кнопку размещают в нижней части сайта, либо она появляется автоматически после прокрутки страницы на определенное расстояние вниз. Характерный пример – социальная сеть vk.com. Там при прокрутке страницы вниз появляется полоска, при клике по которой происходит практически мгновенное перемещение наверх.

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

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

♦ Как устанавливается кнопка вверх без плагинов

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

1.) Этот метод отнимет у вас максимум 5 минут. Переходите на сайт Scrolltotop.com (это не реф. ссылка) ⇒ выбираете понравившуюся кнопку-картинку ⇒ рядом с ней копируете код ⇒ и вставляете в footer.php перед закрывающим тегом (/ body) ⇒ сохраняете изменения ⇒ открываете свой сайт в браузере и любуетесь проделанной работой.

Хочу предупредить, что в скопированном коде есть внешняя ссылка на сайт Scrolltotop.com, которую можете безболезненно удалить и это никак не повлияет на работу скрипта. Оставьте, например, только такой код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://arrow.scrolltotop.com/arrow34.js"></script>

За безопасность скопированного скрипта можете не переживать. Он не причинит вреда вашему сайту (проверял), так как работает по тому-же принципу, что и устанавливаемые многими коды счетчиков посещений или кнопок социальных сетей вроде сервиса Share.pluso.ru. Но так как скрипт выполняет функцию импорта кнопки из постороннего сервера, это может незначительно повлиять на время загрузки вашего сайта. Попробуйте, если не устроит этот вариант, переходите к следующему.

2.) Этот способ можно разделить на 3 элемента — установка кнопки наверх (Back to top) с помощью Html и CSS, с применением Javascript, с использованием JQuery. Но обычно, все эти элементы используются совместно.

⊗ Кнопка прокрутки HTML и CSS (статичная кнопка)
Для начала, создайте свою картинку для кнопки в фотошоп или скопируйте понравившуюся в интернете.
Затем, создайте папку в корне wordpress (где находятся папки «wp-includes», «wp-admin», «wp-content») и назовите ее, к примеру - «img».
Дайте имя картинке (например naverx.png) и поместите ее в эту папку.
Далее, представленный ниже код, нужно вставить в тело тега < body> (в wordpress шаблоне этот тег находится в файлах header.php и footer.php. Я вставлял в футер), но постараться при этом, не попасть внутрь какой-нибудь функции.

<div id="go_up" style="display: block;">
<a href="#"><img src="http://site.com/img/naverx.png" alt="наверх"></a></div>

И в завершении, домен сайта в строке http://site.com/img/naverx.png, не забудьте поменять на свой.

Далее, чтобы иметь возможность придавать кнопке стиль и индивидуальность, вниз файла Style.css добавьте эти параметры:

#go_up {
position: fixed;
width: 50px;
height: 50px;
bottom: 160px;
right: 200px;
cursor: pointer;
}

Отредактируйте этот стиль под свой сайт, сохраните изменения и попробуйте нажать на кнопку. Она уже должна работать. Но если вас не устраивает ее статичность — придется поработать с JQuery и JavaScript.

⊗ Javascript (появление и скрытие кнопки)

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

<script>
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()>="300"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()<="350"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});
$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() { $("#go_up").scrollToTop(); });</script>

Но если у вашего шаблона есть отдельная папка в которой хранятся JavaScript, можете вставить этот скрипт там, или создать новый файл, например myback-top.js. В этом случае вам не понадобятся открывающий и закрывающий теги сценария.
У меня на блоге это реализовано именно так, а подключено к шаблону все в том же файле футер.php через такую строчку кода:

<script src="http://домен.info/wp-content/themes/название темы/js/
myback-top.js"></script>

В дополнение к этому скрипту, хотелось бы объяснить некоторые функции, которые можете редактировать на свое усмотрение, а именно:

- if($(window).scrollTop()&gt;="300" (расстояние от верха сайта в 300рх. когда появится кнопка.)
- if($(window).scrollTop()&lt;="350" (время возвращения страницы вверх в 350 миллисекунд.)

⊗ JQuery

Без JQuery, вышепредставленный код, работать не будет. Потому, первым делом, нужно проверить используется ли JQuery на вашем блоге WordPress. Сделать это можно очень легко.
Если используете браузер Chrome или Mozilla Firefox, на любой странице вашего сайта нажмите сочетание клавиш Ctrl+U, на открывшейся странице нажимаете Ctrl+F и напишите в появившейся форме поиска слово «jquery.» Если поиск не дал результата, добавьте расположенный ниже код непосредственно перед закрывающим тегом (/ body).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Этот сжатый и оптимизированный скрипт будет выполнять свою функцию на стороне хостинга google-библиотек, что позволяет всегда иметь последние версии.
Если же поиск нашел на вашем блоге библиотеку JQuery — этот пункт можно игнорировать и не морочить себе голову.

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

— Создать папку JS в вашем шаблоне. (можете создать и в корне блога, главное потом правильно прописать путь к файлу при подключении)
— Создать в этой папке файл с названием jquery.min.js
— Перейти по этой ссылке https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js, скопировать весь код и вставить в созданный
файл jquery.min.js и сохранить.
— С помощью ftp загрузчика Filezilla или Total Commander загрузить папку с файлом в свой шаблон или в корень Вордпресс.
— В зависимости от того где вы расположили папку с файлом, в Footer.php нужно вызвать работу этого скрипта.(действия аналогичны тем, когда я описывал подключение myback-top.js)

♦ Кнопка прокрутки для сайта с помощью плагинов

Для движка WordPress на данный момент разработано несколько плагинов для вертикальной прокрутки. Все они действуют примерно по одинаковому принципу – в нижней части страницы создается специальная кнопка с текстом или картинкой, которая и отвечает за прокрутку. Однако все эти плагины отличаются друг от друга по функционалу, настройкам и некоторым другим параметрам.

» Smooth Scroll Up

Smooth-scroll-up

Данный инструмент обладает довольно неплохим набором настроек. Прежде всего, вы можете выбрать, что именно будет отображено на месте элемента, отвечающего за прокрутку страницы – обычный текст, кнопка или произвольная картинка. Также можно выбрать одно из трех мест для размещения элемента прокрутки – по центру, справа или слева. На кнопке можно разместить абсолютно любой текст. Можно разместить кнопку не в самом низу страницы, а на определенном расстоянии от ее верха (при прокрутке вниз кнопка будет автоматически прижиматься к нижней части экрана).

Также вы можете задать анимацию при прокрутке. Доступно два варианта анимации – обычная и с затемнением. После установки плагина можно скрыть данную кнопку на главной странице блога, а также на страницах версии блога для мобильных устройств. Скачать Smooth Scroll Up можно вот отсюда — https://Wordpress.org/plugins/smooth-scroll-up. На данный момент плагин скачан больше 40 тысяч раз. Поддерживаемые версии движка — с 3.2 до 4.1.

» jQuery Smooth Scroll

jQuery-Smooth-Scroll

Это гораздо более простой в плане настроек и функционала плагин. Здесь вообще нет ничего лишнего. Сразу после установки jQuery Smooth Scroll начнет работать (можно вообще не вносить никаких изменений в настройки). Кнопка прокрутки называется «Back to top». Она будет расположена в нижнем углу каждой страницы блога.
Сама прокрутка страницы является чуть более плавной, чем в Smooth Scroll Up. Внести какие-то изменения в функционал или работу плагина можно только посредством правки CSS или JS-кода. Ссылка на плагин — https://Wordpress.org/plugins/jquery-smooth-scroll. На данный момент он скачан порядка 50 тысяч раз. Поддерживаемые версии движка WordPress – с 3.1 до 4.0.

» WPFront Scroll Top

WPFront-Scroll-Top

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

Скачать WPFront Scroll Top можно вот здесь — https://Wordpress.org/plugins/wpfront-scroll-top. На данный момент плагин скачан порядка 18 тысяч раз. Поддерживаемые версии движка – с 3.0 до 4.0.

» Scroll Back To Top

Scroll-Back-to-Top

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

Можно выбрать для кнопки один из заранее подготовленных разработчиками значков (либо вписать сюда какой-то свой текст). Также можно выбрать размер данного значка. Ссылка для скачивания Scroll Back To Top — https://Wordpress.org/plugins/scroll-back-to-top. На данный момент плагин скачан порядка 19 тысяч раз. Поддерживаемые версии движка – с 3.0 до 3.9.2.

Заключение.
Как вы догадываетесь, способов и вариантов установить кнопку вверх на сайте без плагинов, существует не мало. Описать их все просто не реально, потому я предложил вам те способы которые опробовал сам и которые подошли моему блогу.
Через некоторое время попробую подкорректировать CSS и JavaScript для того, чтобы стрелка на кнопке переворачивалась и скроллинг происходил не только вверх, но и вниз. Думаю напишу об этом еще одну статью.

Всего хорошего. Удачи и терпения!!
С огромным Уважением, Vladimir Z


35 комментариев к посту “Кнопка вверх (Back to top) без плагинов для WordPress”

Прокомментировать (+)

  1. Лена:

    Мне очень понравилось через Scrolltotop. Установила кнопку наверх за каких-то 10 минут и что главное, работает и не плохо смотрится. Спасибо. А то я с JS как-то не в ладах.

    Ответить
  2. Димон:

    Ура, получилось. Классная инструкция. Спасибо Владимир.

    Ответить
    • Vladimir Zadorozhnyuk:

      Я рад, что у Вас Дима все получилось. Заходите чаще.

      Ответить
  3. Sergey:

    Спасибо за статью, воспользовался примером установки с сайта Scrolltotop.com. , после неудачных установок (косяки в работе: то не отображаются, то не на всех рубриках и т.д.) первых двух плагинов описаных ниже в статье. Ещё раз — СПАСИБО.

    Ответить
    • Владимир Задорожнюк:

      Рад что статья помогла в решении Вашей проблемы. А почему не попробовали установить кнопку вверх через Javascript?

      Ответить
  4. Елена:

    Странная статья, пишете о кнопке, при этом у вас на сайте её нет. И что это за файл futer.php ??? Может вы хотели написать footer.

    Ответить
    • Владимир Задорожнюк:

      Елена, спасибо за комментарий.

      1. От ошибок не застрахован никто. Это по поводу futer и footer. Спасибо за подсказку.

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

      3. В чем Вы видите странность статьи? Разве кто-то запрещает писать о вещах в которых ты разбираешься, но не реализовал на данном сайте или блоге?. Например, у меня есть статья о настройке плагина PLATINUM SEO PACK, но на блоге установлен all in one seo pack. Мне теперь что, нужно удалить статью с описанием плагина который не использую в своем блоге?

      Ответить
  5. Олег:

    Добрый день.

    У меня что-то не работает вариант с Jquery.

    В head нашел следующий код.

    Стало быть, библиотека подключена

    Кнопка есть, и она работает, только без jquery. Показывается все время, и производит резкий переброс наверх.

    Скрипт вставлял в футер и в отдельный файл. В обоих вариантах он не работает.

    Имеет ли значение место вставки скрипта в код страницы?

    Ответить
    • Владимир Задорожнюк:

      Попробуйте добавить коды в Footer.php перед </body> в таком порядке:

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()>="300"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()<="350"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}}); $(function() { $("#go_up").scrollToTop(); }); </script> <div id="go_up" style="display: block;"><a href="#" rel="nofollow"><img src="http://ваш сайт.com//img/naverx.png" alt="наверх" /></a></div>

      У меня все работает четко.

      Ответить
    • Владимир Задорожнюк:

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

      Ответить
  6. Олег:

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

    Ответить
    • Владимир Задорожнюк:

      1.Возможно происходит конфликт между разными библиотеками jquery, или глючит какой-то плагин.

      2.Возможно пропала инструкция подключения jQuery в разделе head в админке.

      3.Погуглите по запросу правильное подключение jQuery WordPress.

      Ответить
  7. Владимир:

    Здравствуйте! Возникла необъяснимая пока мной проблема. Не работает абсолютно ни один плагин прокрутки вверх. Перепробовал десятки разных. Также перепробовал с десяток разных способов создания прокрутки без плагинов, но всё безрезультатно. В случае с прокруткой без плагинов приходилось в стилях дополнительно прописывать z-index, иначе стрелка была под статьёй, но скрипт ни один не работал. В случае с плагинами была мысль что дело тоже в z-index, но попытки отредактировать css файлы не увенчались успехом, также заметил что эти файлы помечены как неактивные. Может вы сталкивались с чем то подобным или есть какие то мысли на этот счёт?

    Ответить
    • Владимир Задорожнюк:

      1. Владимир, почитайте мои ответы Олегу, может быть помогут.

      2. Попробуйте подключить библиотеку JQuery от гугла. (<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>)

      Ответить
  8. Александр:

    Поставил себе на блог и кнопку под цвет подобрал))) пишут что кнопка вверх улучшает блог... Так что советую 😉

    Ответить
    • Владимир Задорожнюк:

      Спасибо за коммент. Позволю себе чуть подправить Ваш комментарий. Кнопка вверх улучшает юзабилити сайта — удобство пользования, полезность вашего блога для читателя-посетителя.

      Ответить
  9. Ирина Викторовна:

    Я занимаюсь продвижением нескольких «молодых» сайтов и ни на одном из них не установлена кнопка наверх. Попробовали поставить по описанному Вами способу. На одном сайте работает отлично, на другом ни в какую. Все мозги сломали. Может поможете?

    Ответить
    • Владимир Задорожнюк:

      Конечно помогу, только для этого мне нужно знать:

      1. Какой способ установки кнопки вверх из статьи Вы использовали?

      2. Предоставьте адрес продвигаемого сайта.

      3. На каком движке работает сайт.

      Ответить
  10. Владимир:

    Спасибо. Очень помогли.

    Ответить
    • Владимир Задорожнюк:

      Всегда рад новым посетителям и комментариям. Спасибо и Вам.

      Ответить
  11. Григорий:

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

    Ответить
    • Владимир Задорожнюк:

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

      Ответить
  12. Светлана:

    Добрый вечер, Владимир! Очень полезная статья, спасибо. Но прошу помощи. По вашим рекомендациям кнопку установила, но появился рисунок, а текста нет. Хочу ее переместить в строку посещений (тоже внизу) и чтобы посредине она была. Такая просьба, как в сказке... На локальном сайте меняла параметры в таблице стилей, но картинка остается без движения. Плагин не хочется устанавливать, а знаний не так уж и много...

    Ответить
    • Владимир Задорожнюк:

      Здравствуйте Светлана. Посмотрел Ваш сайт.

      1. Вы допустили ошибку в ссылке на картинку и потому отражается только текст: src="top-july/naverx.png" а нужно src="/top-july/naverx.png"

      2. В CSS нужно оставить position: fixed; у Вас position: relative;

      3. Не совсем понял куда Вы хотите поместить картинку, но чтобы ее сместить вверх или вниз нужно в CSS править свойство bottom:, чтобы подвинуть влево нужно править right: в сторону увеличения.

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

      Ответить
      • Светлана:

        Владимир, большое спасибо за полезные советы! Все получилось. Кнопку я изменила в Фотошопе, немного не угадала с фоном...

        Ответить
  13. Ирина:

    Через scrolltotop появляется побочка: верхнее меню имеет развернутый вид, хотя подменю должно отображаться после наведения мыши

    Ответить
    • З. Владимир:

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

      Ответить
  14. Артур:

    Спасибо за подробную инструкцию. Ставлю не в первый раз, но в голове не держится. Использовал Ваш второй способ. Всё отлично фунциклирует.

    Ответить
  15. Артур:

    А если у кого на главной отображается, а на остальных нет, делая всё по данной инструкции, пробуйте чистить кэш. Чаще в нем беда.

    Ответить
  16. Влад:

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

    Ответить
    • З. Владимир:

      Влад, ну тут уж «на вкус и цвет — товарищей нет».

      Ответить
  17. AlexP:

    Спасибо большое за четкое руководство!

    Первый способ самый быстрый, за 1 минуту кнопка уже на сайте 🙂

    Не надо устанавливать никаких плагинов, ничего.

    Ответить
  18. Sergey:

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

    Ответить
  19. Sergey:

    Удалил плагин, поставил скрипт с сайта Scrolltotop.com. Стрелка все равно не появляется.

    Ответить
    • З. Владимир:

      Здравствуйте Сергей. Могу предположить несколько вариантов:

      1) Когда удаляете какой-нибудь плагин, обязательно нужно чистить кеш в плагине WP super cache (он стоит на Вашем блоге), или проверять результат работы установленного скрипта в браузере в режиме «инкогнито».

      2) Возможен конфликт с каким-то из установленных плагинов или скриптов. Попробуйте отключить на время все плагины, а затем установить скрипт от Scrolltotop.

      Ответить

Ваш комментарий (Спам не пройдет!!!)