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

Необходимость добавлять на страницы блога 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()>="300" (расстояние от верха сайта в 300рх. когда появится кнопка.)
- if($(window).scrollTop()<="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 можно вот отсюда — https://Wordpress.org/plugins/smooth-scroll-up. На данный момент плагин скачан больше 40 тысяч раз. Поддерживаемые версии движка — с 3.2 до 4.1.

» 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

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

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

» 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