Как создать плавающую кнопку на сайте html + css. Как сделать кнопку вверх на сайте


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

Здравствуйте, дорогие посетители сайта Impuls-Web!

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

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

Добавить кнопку вверх для сайта можно двумя способами:

  1. 1.При помощи кода
  2. 2.При помощи плагина

Первый способ добавления кнопки вверх подойдет абсолютно для любого сайта. А второй подходит только для тех, которые сделаны на CMS WordPress. Если же ваш сайт сделан на какой-то другой CMS, то вам нужно поискать подходящий для нее модуль или расширение.

В данной статье мы рассмотрим очень удобный плагин WPFront Scroll Top для WordPress, который позволяет добавить кнопку вверх для сайта и настроить ее работу и визуальное оформление без написания дополнительных стилей.

Итак, давайте установим и настроим плагин:

  1. 1.Как обычно, в админпанели WordPress заходим в «Плагины» => «Добавить новый» и в строке поиска вставляем название плагина. Установка плагина
  2. 2.Далее нажимаем на кнопку «Установить», а затем «Активировать».
  3. 3.После активации у нас в главном меню появиться пункт «WPFront». Наводим на него указатель мышки и переходим в подпункт «Scroll Top». Переходим в настройки плагина
  4. 4.Мы попадаем на страницу настройки нашей кнопки вверх для сайта. Первое, что нам нужно здесь сделать, это поставить галочку возле пункта «Включить»: Включаем плагин
  5. 5.Далее идут настройки работы и отображения. Остановлюсь на наиболее важных из них. Настройки работы плагина
    • Скролирвоание – параметр, отвечающий за появление элемента, после того, как пользователь начал прокручивать страницу.
    • Размер кнопки – если нас не устраивает размер кнопки по умолчанию, мы можем задать его самостоятельно.
    • Прозрачность кнопки – задает уровень прозрачноти: 100% — не прозрачная, 0% — полностью прозрачная.
    • Скорость скрола – задает скорость, с которой будет пролистываться страница вверх после нажатия на кнопку.
    • Скрывать на маленьких устройствах – позволяет отключить отображение элемента на мобильных устройствах.
    • Ширина маленьких устройств – здесь мы можем задать ширину экрана мобильного устройства. Если ширина экрана будет меньше либо равна заданному значению, кнопка будет скрываться.
    Настройка WPFront Scroll Top
    • Стиль кнопки – здесь мы можем выбрать стиль отображения. В виде стрелочки, или в виде текста, например, «Вверх».
    • Соответственно если мы выбираем текстовую кнопку, мы можем задать надпись и настроить ее в разделе настроек «Текстовая кнопка».
  6. 6.Далее, в разделе «Расположение» мы выбираем место расположения нашего элемента на странице, а так же горизонтальный и вертикальный отступ от края экрана. Настройка расположения
  7. 7.В разделе настроек «Фильтр» мы можем указать конкретные страницы, на которых будет отображаться кнопка вверх для сайта, или наоборот, запретить выводить ее на определенных страницах. Задание фильтра
  8. 8.В разделе «Картинка» нам нужно выбрать стиль оформления из предоставленных вариантов, поставив точку возле нужной картинки. Скины для кнопки
  9. 9.Если же ни один из вариантов нам не подходит, то нам нужно поставить точку возле графы «URL своей картинки». После чего нужно подготовить иконку и загрузить ее в медиабиблиотеку WordPress, а в поле «URL своей картинки» вставить адрес картинки.

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

    Как посмотреть адрес изображения в WordPress
  10. 10.И последнее, что нам нужно сделать, это нажать «Сохранить изменения» и проверить, как все работает: Кнопка для скролинга вверх

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

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

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

А на сегодня у меня все. До встречи в следующей статье!

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

impuls-web.ru

Как создать плавающую кнопку на сайте html + css

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

Принцип действия всех таких кнопочек основывается на свойстве position: fixed; Рассмотрим html структуру ниже:

<div>Бонус!</div>

<style>.fixedbut { position: fixed; bottom: 20px; right: 20px; display: block; background: #2db700; color: #fff; text-decoration: none; padding: 6px 23px; font-size: 17px;}.fixedbut:hover { background: #222; }</style>

Мы создали простую кнопку с классом fixedbut, на которую назначили стиль. В стиле самое главное обратите на свойство position: fixed; - оно и позволяет кнопке всегда "плавать" на экране сайта, а bottom: 20px; right: 20px; устанавливают ее снизу, справа. Чтобы кнопка была по левому краю измените right на left. Остальные стили для красоты.

Но наша кнопка не активна на клик. Давайте добавим переход на любую страницу, по ее клику. Это можно сделать так:

<div>Бонус!</div>

или с помощью обычной ссылки:

<a href="/o-nas/">Бонус!</a>

В первом случае мы использовали JavaScript, а во втором html разметку.

Если вам требуется кнопка наверх, то можете в обоих случаях значение ссылки заменить на #. Страница перематывается наверх при клике на кнопку.

Рассмотрим еще пару плюшек, которые вам могут пригодиться не только в этом проекте.

1. Чтобы кнопка (да и любой элемент, на который может назначаться псевдокласс :hover) плавно меняла цвет, добавьте в класс fixedbut свойство: -webkit-transition: 0.33s all ease-out; -o-transition: 0.33s all ease-out; transition: 0.33s all ease-out;2. Если вам нужно запретить срабатывание клика по ссылке или выполнение скрипта, добавьте свойство: pointer-events: none; Например, при клике на ссылку: <a href="/o-nas/">Бонус!</a> перехода по ссылке не произойдет.3. Чтобы при клике на ссылку, страница открылась в новой вкладке, добавьте атрибут target="_blank".

 

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

blogprogram.ru | 2017-03-30 | Как создать плавающую кнопку на сайте html + css | Наверняка вы видели на многих сайтах кнопки, которые двигаются одновременно с прокруткой страницы. Частым примером таких кнопок может быть акция, зака | http://blogprogram.ru/wp-content/uploads/2017/01/547-131x131.jpg

blogprogram.ru

Как сделать кнопки вверх и вниз: простым кодом!

Приветствую Вас друзья! Сегодняшняя тема статьи посвящена улучшению навигации, я на примере покажу: как сделать кнопки вверх и вниз на сайте/блоге... Делается это очень просто, внимательно читаем, копируем код в конце статьи и размещаем на Ваших ресурсах!

Читайте:

Чтобы реализовать возможность скроллинга на сайте в виде кнопки вверх и вниз, нам потребуется подключить кое-какие скрипты, а именно, библиотеку jQuery, сам скрипт скроллинга и парочку DIV блоков.

Хм, слушайте, а Вам вообще известно для чего нужны эти кнопки вверх и вниз, да и сам скроллинг на сайте? Нет?! Хорошо, тогда я сейчас на своем личном примере, попробую объяснить их смысл.

Вот, к примеру, возьмем мой блог, на котором Вы сейчас находитесь, что мы можем увидеть?! Много интересных статей и большинство из них очень объемные. Прибавим к ним еще и комментариев соточку и будет вообще жесть =) Интересно, на сколько хватит колесика мышки и нервов у посетителя?!

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

Раньше у меня была реализована, кстати, только кнопка — вверх. Было круто, прочитал статью и пару десятков комментариев, нажал кнопку, «ТЫЦ» и прокрутка в самый верх блога. Но почему я сделал так же прокрутку и вниз?!

Причина этому — комментарии и объемные статьи... Это еще терпимо когда их 10-30, но что если количество комментариев 100-300 и более? А у меня есть и такие статьи, например вот эта статья. Вот я и реализовал такую возможность и сейчас все «Тип-топ», для того чтобы прочитать последние комментарии достаточно нажать кнопку и «ТЫЦ» мы в самом низу блога...

ИНСТРУКЦИЯ: Как сделать кнопки вверх и вниз

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

Первым делом пропишем библиотеку jQuery в шапке сайта, если она не подключена (последние версии библиотек смотрите тут):

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>

Затем пропишите в шапке или в подвале сайта сам скрипт скроллинга кнопки вверх и вниз (я так вообще соединил все скрипты в один файл, и разместил его перед тегом </body>, но это другая история):

<script type='text/javascript' src="путь к скрипту/scroll-startstop.events.jquery.js"></script>

И нам осталось прописать Дивы и CSS стили для кнопок. Дивы размещаем перед закрывающимся тегом </body>

<div></div><div></div>

И CSS стили лучше пропишите в своем style.css в самом конце документа:

.nav_up {padding:7px;background-color:white;border:2px solid #555;position:fixed;background:transparent url (images/arrow_up.png) no-repeat top left;background-position:50% 50%;width:20px;height:20px;bottom:75px;opacity:0.7;left:40px;white-space:nowrap;cursor: pointer;}

.nav_down {padding:7px;background-color:white;border:2px solid #555;position:fixed;background:transparent url (images/arrow_down.png) no-repeat top left;background-position:50% 50%;width:20px;height:20px;bottom:30px;opacity:0.7;left:40px;white-space:nowrap;cursor: pointer;}

Скачать исходники

Все нужные файлы, а так же инструкции о том, как сделать кнопки вверх и вниз, Вы найдете в скачанном архиве! Теперь можно наслаждаться навигацией по сайту для людей! Все просто правда?!

P.S.: Кстати следующая статья посвящена плагинам — подпишитесь на обновления блога! И скоро будет новый конкурс на блоге...

savme.ru