Кнопка «Вверх» для сайта

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

Прежде чем установить кнопку на своём блоге, я занялся поиском оптимального решения. Самым простым способом оказалось, как вы наверное догадались, установка плагинов.

Установки кнопки «Вверх» с помощью плагина для WordPress

Я попробовал два: Scroll to Top и Dynamic To Top. Оба достойные плагины, легко устанавливаются и настраиваются. Есть возможность указать путь к своей картинке. В Dynamic To Top есть ещё возможность настроить, будет ли кнопка «Вверх» отображаться на мобильных устройствах.

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

Такой способ реализации кнопки «Вверх» подойдёт лишь тем, кто абсолютно не желает хоть на сколько то ускорить работу своего сайта. И не желает разбираться в тонкостях его работы.

И я решил не использовать плагин и продолжить поиск идеального решения.

Установки кнопки «Вверх» на основе jQuery

jQuery — библиотека JavaScript, обеспечивающая взаимодействие JavaScript и HTML.

Данный способ подойдёт для реализации кнопки «Вверх» с плавной прокруткой на многих сайтах, в том числе и сделанных на WordPress.

Этот способ хорош, но он на один шаг длиннее следующего способа. О котором мы как раз и поговорим подробно.

Установки кнопки «Вверх» на чистом JavaScript

Итак, именно этот способ я выбрал для своего блога созданного на WordPress. Для этого способа вам потребуется всего лишь два файла (картинка и скрипт). И сделать вставку кода в файл footer.php и добавить несколько стилей в style.css.

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

Приступаем.

Шаг 1. Создание изображения кнопки «Вверх»

Итак, для начала вам потребуется изображение для кнопки «Вверх». Таких изображений в Интернете огромное множество. Скачав такое изображение, его нужно будет ещё доработать. А точнее сделать спрайт. Спрайты позволяю на основе CSS сделать объединение фоновых картинок, которое выглядит как эффект анимации.

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

После того, как вы скачали нужное изображение, переходим в онлайн редактор Pixlr Edition и выбираем «Загрузить изображение с компьютера».

Загрузка изображения

И открываем ваше изображение кнопки «Вверх». В моём случае, — это ракета.

Предварительное изображение

Если ваше изображение большего размера, чем вам нужно, как у меня. Такое изображение нужно уменьшить до нужных размеров. Воспользуемся способом трансформации, так как нужно изображение повернуть. Выбираем пункт меню «Редактирование»«Free transform».

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

Трансформация изображения

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

Маркеры трансформации

Должно получится вот так.

posletransf

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

Копируем слой

Следующим действием нужно выстроить изображения строго вертикально друг над другом. Для этого выбираем инструмент «Перемещение» и клавишами управления курсором поднимаем одно изображение над другим.

Вертикальное выравнивание

Теперь нужно верхнее изображение обесцветить, для получения эффекта, когда цвет проявляется после наведения на объект указателя мышки. Выбираем пункт меню «Коррекция»«Цветовой тон/Насыщенность». Ползунок «Насыщенность» сдвигаем в крайнее левое положение (-100).

Обесцвечивание

Теперь нужно отсечь всё лишнее. Для этого выбираем инструмент «Обрезка» и выделяем область вокруг нашего изображения. Ничего лишнего, только два изображения. После выделения области, нажимаем клавишу «Enter».

Обрезка изображения

Всё готово для сохранения изображения, но для начала запомните размер изображения. Он пригодятся в дальнейшем.

Размер изображения

Вот теперь всё готово и нужно сохранить изображение. Для этого переходим в пункт меню «Файл»«Сохранить». Выбираем сохранить на «Мой компьютер», вводим имя (только латинские буквы) и выбираем тип файла PNG (этот формат поддерживает прозрачность). Жмём кнопку «ДА».

Сохранение изображения

Шаг 2. Создание файла скрипта кнопки «Вверх»

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

Для создания файла, да и вообще работы с кодом, рекомендую использовать бесплатный редактор кода NotePad++.

Открываем редактор, создаём новый файл и вставляем предложенный код. Скачать весь код можно здесь.

Фрагмент кода

Теперь сохраняем файл в формате js.

Файл скрипта

Готово, изображение и файл со скриптом для кнопки «Вверх» с плавной прокруткой у нас есть. Остаётся внести небольшой фрагмент кода в файл подвала (footer.php) вашей темы WordPress. И в таблицу стилей (style.css) добавить необходимые стили для кнопки «Вверх». А также скопировать наши файлы на сайт.

Шаг 3. Копирование файлов на сайт WordPress

Лучше всего для выполнения таких задач подойдёт FTP-соединение через TotalCommander или FileZilla. О том, как настроить такое соединение читайте здесь.

Файл с изображением кнопки «Вверх» нужно скопировать в папку images Вашей темы.

Пример: http://Ваш сайт/wp-content/themes/Ваша тема/images/up.png

Файл скрипта нужно скопировать в папку js Вашей темы.

Пример: http:// Ваш сайт /wp-content/themes/ Ваша тема /js/totop.js

Если таких папок у вас нет, вы можете их создать или скопировать файлы в другие папки. Только непременно запомните к ним путь. Это важно.

Шаг 4. Доработка файла footer.php

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

Итак, в административной панели WordPress выбираем раздел «Внешний вид»«Редактор» — открываем файл «Подвал (footer.php)».

И перед закрытием тега </body> вставляем такой код:

<!— Кнопка Вверх —>

<script type="text/javascript" 
src="https://Ваш сайт/wp-content/themes/Ваша тема/js/totop.js"></script>

Важно! Помните, что вам необходимо вставить вашу ссылку к файлу скрипта.

Вставка кода

И теперь остаётся последний штрих, — настроить стиль для кнопки.

Шаг 5. Создание стиля для кнопки «Вверх»

Для этого в файл стиля Вашей темы (style.css), добавляем вот такие стили:

Стиль кнопки

Помните, наше изображение было 39х191 пиксель. Отсюда и стиль: ширина (width) 39px; высота (height) половина от основной высоты 96px; смещение фона при наведении мышки scrollTop:hover{ background-position:0 -108px; }.

Разумеется, у вас будет своё изображение и размеры будут отличатся. Поэтому надо будет поэкспериментировать с этими значениями.

На этом создание кнопки «Вверх» с плавной прокруткой на основе JavaScript закончено. Можно перезагружать страницу Вашего блога в браузере и любоваться работой этой кнопки.

Для облегчения задачи, я приготовил для Вас файл архив в котором собрал все необходимые исходные файлы. Файл расположен на Яндекс-Диске, скачать можно здесь.

Желаю вам удачного применения кнопки «Вверх» на ваших сайтах и блогах. Если будут вопросы пишите в комментариях, постараюсь помочь.

С уважением, Максим Зайцев.

Понравилась статья? Поделиться с друзьями:
Комментарии: 24
  1. Николай

    Хорошая статья! Понравилось!

    1. Максим Зайцев (автор)

      Спасибо, Николай. Рад, что статья Вам понравилась.

  2. Сергей

    классная кнпка!!! ну я пока не буду делать таую обойдусь той что стоит)

    1. Максим Зайцев (автор)

      Сергей, спасибо за оценку. Ваша кнопка хорошо смотрится, в тему Вашего блога. Если она Вас устраивает, то и незачем менять.

      1. Сергей

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

        1. Максим Зайцев (автор)

          Сергей, такую кнопку всегда можно сделать в свободное время. На всё про всё уйдёт не больше часа. И то большую часть времени нужно потратить на поиск подходящего изображения и доработку его в Photoshop. Желаю удачи.

  3. Владимир

    Нажмите на колесико мышки и подвигайте вверх, вниз, вправо, влево.

    1. Максим Зайцев (автор)

      Владимир, спасибо за совет. Думаю, многим пользователям ПК будет полезно.

  4. Сергей

    Отличная кнопка получилась и без плагина. Спасибо за интересный материал. У меня на сайте простая кнопка стоит )

    1. Максим Зайцев (автор)

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

  5. Сергей

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

    1. Максим Зайцев (автор)

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

  6. Зинаида

    Хорошая кнопка, но у меня к сожалению почему-то не получилось. Всё делала по инструкции. Очень жаль. Спасибо.

    1. Максим Зайцев (автор)

      Здравствуйте, Зинаида. А что именно не получилось. Возможно, где то была допущена ошибка?

  7. Юрий

    Добрый вечер, Максим! Столкнулся со следующим, у меня стоит плагин jQuery Vertical Accordion Menu, меню аккардеон и при добавлении кнопки «вверх» меню перестаёт работать, просто всегда открыто. Понимаю, что 2 раза подключается файл jquery, но не понимаю как исправить. У меня немного другой код

    Если убираю первый скрипт с jquery, пропадает кнопка, и работает меню. Подскажи, если знаешь, как согласовать этот капризный плагин JQuery Accordion Menu с кнопкой.

    1. Максим Зайцев (автор)

      Здравствуйте, Юрий. Четно скажу — этот плагин мне не знаком. Но, для решения проблемы нужно открывать файл скрипт кнопки вверх и скрипт плагина и искать где они перекликаются функциями. Это довольно сложно.
      Другой вариант, реализовать меню на чистом css. Тут тоже всё зависит от меню и возни достаточно. Самый простой пример реализации такого меню можете посмотреть здесь: http://www.designchemical.com/lab/jquery-vertical-accordion-menu-plugin/getting-started/
      Желаю удачи!

      1. Юрий

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

        1. Максим Зайцев (автор)

          Юра, если лезть в исходный код плагина, то это лишь до обновления. После обновления всё слетит. Как вариант, можно попробовать для стиля стандартной кнопки присвоить свойство haver и стилями css настроить вид кнопки.

  8. Роман

    Красивая кнопочка получилась, благодарю, буду вас рекомендовать.

    1. Максим Зайцев (автор)

      Роман, рад что всё получилось. Желаю удачи!

  9. Екатерина

    Всё поставила, всё красиво, однозначно вас в закладки.

    1. Максим Зайцев (автор)

      Екатерина, добрый вечер. Очень хорошо, что всё получилось. Заходите ещё в гости. Удачи вам!

  10. Николай

    Хорошая статья…Буду пробовать на своем сайте…

    1. Максим Зайцев (автор)

      Желаю удачи, Николай!

Добавить комментарий