Приветствую на своем блоге. В этой статье я расскажу как сделать кнопку наверх для своего сайта с плавной прокруткой страницы. Мы разберем вариант установки на сайт 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. Вот ссылка на скачивание исходников СКАЧАТЬ
С уважением, Андрей Юрченко
Поставил кнопку. Спасибо
Пожалуйста! Рад что пригодилась!