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

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

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

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

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

Открываем в редакторе файл index.html и в секции head прописываем код для подключения стилей и скриптов.

<title>Кнопка наверх</title>

<meta charset = «utf-8″ />

<link href=»css/style.css» rel=»stylesheet» type=»text/css»/>

<script type=»text/javascript» src=»js/jquery-1.11.0.min.js»></script>

<script type=»text/javascript» src=»js/script.js»></script

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

<span id=»top»></span>

<p>Содержимое страницы.</p>

<p style=»margin-left: 0px;» id=»back-top»><a href=»#top»><span></span>Наверх</a></p>

Теперь нам нужен сам скрипт, функция которого выполнять прокрутку. Скрипты помещаем в папку js

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

Картинку стрелки с расширением png помещаете в парку img. Кнопка работает в виде полосы по всей высоте страницы и для прокрутки можно кликать в любом ее месте.

Вот наша кнопка готова, если вам что-то не понятно, то можете скачать все исходники по ссылке в конце статьи, которые расположены в папке sait_html.

Кнопка вверх для WordPress

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

Если вам тоже это интересно или вы сталкивались с такой проблемой, то можете почитать мою статью «Как подключить скрипт JQuery к WordPress».

Для установки кнопки вверх в WordPress нам так же понадобится картинка кнопки, скрипт и код подключения. Мы с вами установим все в шаблон темы. Я вам расскажу о более простом способе, который не требует особых знаний.

Для начала скачайте по ссылке в конце статьи все исходники и распакуйте архив в удобное место на своем компьютере. В архиве есть папка WordPress, в которой находится папка со скриптами и картинкой кнопки и инструкция по установке. Скрипты уже исправлены по методу, описанному мной в статье, упомянутой выше.

Давайте разберем что нужно сделать. Папку up-arrow со скриптами вам нужно закачать на сервер в папку темы и она у вас должна оказаться по пути: ваш сайт/wp-content/themes /ваша тема/ up-arrow.

После заходите в панель управления вашим сайтом и во вкладке «Внешний вид» переходите в редактор. Найдите вашу таблицу стилей style.css, откройте ее и в самом низу вставьте код стиля кнопки, который скопируете из инструкции. Не забудьте сохранить изменения кликнув по кнопке «Обновить файл».

Далее откройте footer.php и перед закрывающимся тегом </body> вставьте следующий код:

<script src=»<?php print get_template_directory_uri(); ?>/uparrow/jquery-1.11.0.min.js» type=»text/javascript»></script>

<script src=»<?php print get_template_directory_uri(); ?>/uparrow/script.js» type=»text/javascript»></script>

<p style=»margin-right: 0px;» id=»back-top»><aa href=»#»><span></span>ВВЕРХ</a></p>

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

На этом все. Надеюсь данная статья была для вас полезна. Будут вопросы, задавайте в комментариях. Желаю успехов.

P.S. Вот ссылка на скачивание исходников СКАЧАТЬ

С уважением, Андрей Юрченко