Два лучших способа добавить кнопку вверх без плагина

Красивая кнопка вверх для любого сайта

Приветствую вас, дорогие друзья!

В одной из прошлых статей я показывала вам, как сделать кнопку вверх для сайта с помощью плагина для CMS WordPress.

Эту статью вы можете найти по этой ссылке: Как сделать кнопку вверх для сайта?

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

В этом случае вам подойдет способ добавления кнопки вверх для сайта при помощи кода, который мы рассмотрим в этой статье.

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

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

Простая кнопка вверх для сайта

Первый самый простой способ добавления кнопки вверх для сайта требует минимум усилий для подключения, но при этом кнопка получиться максимально простой, и у нее не будет эффектов появления и плавной прокрутки.

Суть способа заключается в том, что мы при помощи HTML добавляем в самом конце страницы, перед закрытием тега body, код копки:

После чего нам нужно дописать несколько CSS-стилей:

Вот, что у нас получится:

Переход вверх по странице

Так же можно дописать стили, которые будут срабатывать при наведении указателя мышки:

При наведении кнопка будет становиться насыщеннее:

Кнопка с эффектами при наведении

JQuery кнопка вверх для сайта

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

Суть способа заключается в подключении к сайту специального JQuery-плагина, который вы можете скачать по этой ссылке:

После скачивания архива вам нужно сделать следующее:

  1. 1.Разархивируем архив. В нем находятся три папки, которые нужно загрузить в корневую папку сайта на хостинге, или в папку с темой сайта. Это можно сделать при помощи FTP-клиента или через файловый менеджер хостинга.
    Архив с файлами

    Файлы index и readme.md для работы плагина не нужны, их можно не загружать на хостинг.

  2. 2.Далее нам нужно подключить скрипт плагина на страницах нашего сайта. Для этого нужно через Notepad++ подключиться к сайту по FTP и открыть файл страницы сайта или файл шаблона темы, в случае если сайт сделан на CMS.
    Открываем файл footer.php

    Для WordPress нужно открыть файл подвала страницы с названием footer.php.

  3. 3.Перед закрытием тега <body> нам нужно вставить следующий скрипт:

    Код подключения скрипта
    Обратите внимание. В первой строке происходить подключение библиотеки JQuery. Если у вас уже подключена библиотека, или у вас сайт сделан на CMS, то вам делать повторное подключение не нужно, и эту строку лучше удалить.
    Так же вам нужно заменить пути к файлам в первых трех строках подключения плагина.
  4. 4.Далее нам нужно подключить CSS-стили кнопки. Сделать это мы можем двумя способами:
    1. 1.Можно подключить файл стилей плагина к сайту, добавив между тегами следующую строку:

      Здесь вам тоже нужно указать свой полный путь к файлу стилей.
    2. 2.Или же можно поступить по-другому, и вставить стили плагина в файл стилей нашего сайта.

      Для этого нужно открыть файл ui.totop.css, который находится в папке css плагина, и скопировать все стили, которые находятся в нем.

      Стили для кнопки вверх

      После чего открываем в Notepad++ файл стилей нашего сайта и в самом низу вставляем скопированные стили. После этого не забываем сохранить и выгрузить файл на хостинг.

      Стили сайта

Если все сделано правильно, то в результате мы получим вот такую кнопку вверх на страницах своего сайта:

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

Если вам не нравиться дизайн кнопки вы можете заменить изображение в папке img на свое. Это можно сделать при помощи PhotoShop, взяв за основу эту картинку и поменяв, к примеру, ее цвет.

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

До встречи в следующих статьях!

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

2 комментария

  1. Помогите пожалуйста) Как при просмотре фото в галерее ВордПресс добавить кнопку под изображение? Чтобы оно было под каждым просматриваем фото?

    • Для этого нужно править код WordPress. У меня недавно был похожий случай, но я работала с плагином Grand Media Galery. Искала в файлах плагина файл в котором делается вывод всплывающего окна с картинкой и там вставляла кнопку. После несения изменений плагин нельзя обновлять.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif