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

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

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

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

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

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

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

В первом случае мы использовали 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 style=»pointer-events: none;» href=»/o-nas/»>Бонус!</a> перехода по ссылке не произойдет.
3. Чтобы при клике на ссылку, страница открылась в новой вкладке, добавьте атрибут target=»_blank» .

Делаем кнопку «Наверх» для сайта без плагинов

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

В статье будут следующие части:

Для чего нужна эта кнопка?

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

Польза для посетителей

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

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

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

Польза для сайта

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

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

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

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

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

• Простота и легкость настройки;
• Не нужна поддержка библиотек и скриптов.

• Кнопка видна постоянно, даже когда посетитель находится в самом верху страницы;
• Перемещение вверх происходит не плавно, а мгновенно, рывком.

Код кнопки будет состоять из двух элементов. Первый – это HTML ссылка, размещаемая в коде сайта. Второй – это CSS стиль кнопки, он размещается в файле стилей и отвечает за расположение кнопки и ее внешний вид.

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

Дальше вам необходимо прописать стили созданного нами класса кнопки buttonup. Для этого открываем файл style.css и добавляем в конец следующий код:

Этот код отвечает за положение кнопки, редактируя цифры, вы можете его изменить. Как только вы сохраните файл, кнопка начнет действовать. Параметр width ставьте равным ширине картинки, bottom – отступ от нижнего края экрана, right – от правого края экрана.

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

Итак, друзья, простую кнопку на HTML мы с вами сделали, теперь давайте займемся реализацией более продвинутой версии. В ней мы избавимся от тех недостатков, которые присутствовали в предыдущем варианте, а именно:

• Кнопка не будет постоянно маячить перед глазами, а появится только тогда, когда посетитель пролистает страницу вниз;
• Эффект возвращения наверх страницы будет плавным, что выглядит стильно;
• Кроме того, наша кнопка будет меняться при наведении курсора (менять цвет или яркость).

Существует масса способов и скриптов, позволяющих сделать кнопку вверх. Признаюсь честно, я не программист и, если в предыдущем варианте с HTML я разобрался, то в JavaScript я полный чайник. Поэтому я просмотрел и изучил кучу разных версий и выбрал для себя вариант, который проще всего реализовать (меньше изменений в разных файлах).

В целом, процесс создания такой кнопки чуть-чуть сложнее, но разобраться с ним может каждый. Делается все в 2 этапа:

1. Подключение библиотеки jQuery

Если вы используете WordPress или другую стандартную CMS, то эта библиотека, скорее всего, подключена по умолчанию. В таком случае, этот пункт вы можете пропустить.

Для подключения библиотеки jQuery, вам нужно прописать в разделе <head></head> вашего сайта следующую строку:

2. Подключение скрипта, выводящего кнопку

Код скрипта можно вставить двумя способами:

• либо поместить его целиком между тегами <head></head>,
• либо разместив скрипт в отдельном фале, а в коде страницы прописать его подключение.

Первый вариант проще, второй, на мой взгляд, удобнее.

Вот сам скрипт (автор Тимур Камаев wp-kama.ru):

Замените в скрипте ссылку https://biznessystem.ru/img/arrow.png на ту, где будет храниться ваша картинка.

Если вы будете использовать для скрипта отдельный файл, как это сделал я, то в него помещаете код, находящийся между тегами <script></script>, сами теги копировать в файл не нужно. Файл размещаете у себя на хостинге.

Я назвал файл buttonup.js. Для его подключения в заголовке сайта прописываем вот такую строчку:

Вместо «путь к файлу» прописываете адрес, где лежит ваш файл со скриптом.

Картинка для кнопки

Для того, чтобы изображение кнопки менялось, файл картинки должен состоять из двух половинок, на одной изображается обычная стрелка, на другой активная стрелка (под наведенным курсором). Посетителю одновременно показывается только одна половина. У меня верхняя стрелка сделана полупрозрачной, вторая непрозрачная (яркая).

Файлы стрелок с изображения ниже можно скачать здесь.

Заданные в скрипте цифры приведены для картинки размером 88 на 250 пикселей (каждая стрелка сделана по 125 пикселей в высоту — первая стрелка из примера). Если вы будете использовать другое изображение, то изменяете в коде значения width и height на свои.

Значение background-position – это смещение картинки, его делаете чуть больше половины всей высоты изображения.

Bottom – это отступ от нижнего края экрана. Left – отступ от левого края экрана, здесь он задан в процентах, а можно задать в пикселях, как это было в примере с HTML. Там параметр right (отступ справа) был задан в пикселях.

Код можно упростить, если удалить из него вот эту строку:

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

Несколько вариантов стрелок я сделал (ссылка на архив с ними выше), а в интернете вы можете отыскать много готовых.

Как видите, создать красивый сайт самому несложно. На этом на сегодня все.

Плавающая кнопка на сайте

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

Навигация по статье:

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

Выглядеть эта кнопка будет как то так:

Как создать плавающую кнопку?

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

Вместо «Заказать звонок» вы вписываете любой нужный вам текст.

Далее нам нужно прописать определённые CSS свойства для этого блока, чтобы он был похож на плавающую кнопку.
Для этого открываем файл стилей сайта. В случае с WordPress это будет файл style.css, который находится по адресу:

В самом конце данного файла нам нужно прописать следующие свойства:

За поворот блока на 90 градусов отвечает вот этот набор свойств:

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

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

Если вы хотите чтобы по нажатию на плавающую кнопку осуществлялся переход на другую страницу, то в коде

вместо # ставим ссылку на страницу.

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

Как создать всплывающее окно?

О том, как создать всплывающую форму обратной связи на сайте WordPress я писала в этой статье. Аналогично создаётся всплывающее окно для любого другого контента.

Если в двух словах, то вот что нужно сделать:

1. 1. Устанавливаем плагин Easy FancyBox
2. 2. Переходим в меню «Настройки» => «Медиафайлы»
3. 3. Находим настройки Easy FancyBox, снимаем галочку возле пункта «images» и ставим возле пункта «Inline content», после чего сохраняем изменения.

Теперь нам нужно немного доработать наш код, а именно: добавить ссылке класс inline-content, затем добавить скрытый блок со всплывающим контентом и поставить ссылку на этот блок.
На практике это будет выглядеть так:

Вместо «Здесь сам контент, который будет отображаться во вплывающем окне» вы можете вставить свой текст, вывести шорткод формы обратной связи, добавить код формы подписки и так далее.

Вот как это будет выглядеть на сайте:

Я там добавила ещё внутренний отступ в 20 пикселей и серую рамку для блока всплывающей формы с >

В итоге весь добавленный CSS код выглядит так:

На этом у меня всё! Спасибо что дочитали до конца! Если статья была для вас полезной то не забудьте поделиться ею в соцсетях, также подписывайтесь на обновления блога и на канал YouTube.

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

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

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

31 комментарий

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

Алексей! И Вам большое спасибо за комментарий! Надеюсь у Вас всё получится!

Доброго времени суток.
Меня интересует один пункт из вашей статьи, а именно:

«Вместо «Здесь сам контент, который будет отображаться во вплывающем окне» вы можете вставить свой текст, вывести шорткод формы обратной связи, добавить код формы подписки и так далее.»

Я вставил шоркод http://prntscr.com/c05sag и при нажатии на кнопку, появляется просто текст http://prntscr.com/c05skr

Статью перечитал уже раз 5. Подскажите пожалуйста что не так я делаю?

Здравствуйте! А Вы весь этот код вставляли в шаблон, в запись или в виджет? Если в шаблон, то он не будет работать в том виде в котором Вы его вставили. Его нужно через специальную php функцию выводить. Вот ссылка на статью, где написано как это сделать Вставка шорткода в шаблон WordPress или почему не работает шорткод в файлах темы?

Здравствуйте, Юлия. Поясните, пожалуйста, что должно находиться на месте <!—Блок со скрытым контентом—> ? У меня всплывающая форма обратной связи, я шорткод написала вместо >Здесь сам контент, который будет отображаться во вплывающем окне<.

Здравствуйте, Надежда!
Вместо ничего не нужно ставить! Это просто комментарий в HTML коде чтобы было понятно что это за блок и зачем он нужен. Чтобы не сбивать людей с толку я удалила эту строку из кода 🙂

Большое спасибо Юленька! Очень помогла ваша статья!

Александр! И Вам спасибо за комментарий! 🙂

Юлия, доброй ночи!

Подскажите, пожалуйста, а как вместо кнопки «Заказать звонок» вставить картинку?

Допустим, трубку телефона.

Юлия, добрый день!

— как вместо кнопки с надписью «Заказать звонок» вставить кнопку в виде картинки, например, трубки телефона

— добавить кнопке прозрачности

— сделать эффект появления кнопки при прокрутке страницы

Если вопросы обширные, подскажите в каком направлении вообще копать эти вопросы?

Заранее спасибо! У Вас потрясающий сайт.

Здравствуйте, Кирилл!
1. Для того чтобы вставить картинку вместо надписи нужно в коде вместо «Заказать звонок» вставить тег картинки
Вместо «/images/coll.png» у Вас будет идти путь к вашей картинке. Картинку можно добавить через медиафайлы WordPress, а затем скопировать её ссылку и вставить в предложенный код.
2. Для добавления прозрачности используется CSS свойство opacity. В коде это будет выглядеть так:
.call_back a <
opacity:0.5;
>

Если вместо надписи будет картинка, то нужно написать так:
.call_back a img <
opacity:0.5;
>

Значение прозрачности задаётся от 0 до 1, где 1 это непрозрачное изображение.

3. Плавное появление — это отдельная тема. Если хотите я напишу в ближайшее время статью по ней и скину Вам ссылку. Хорошо?

Плавающая кнопка Вверх

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

Другой вариант — установить ссылку программно через скрипт.

Добавим стили CSS для кнопки. Подготовьте подходящее изображение, например, стрелку вверх.

Когда страница загружается, то кнопка невидима (display: none). Чтобы её увидеть, нужно прокрутить страницу вниз. С помощью jQuery мы задаём величину в пикселях для прокрутки, чтобы определить момент появления кнопки. Нам поможет функция scroll().

Кнопка подготовлена. Добавляем анимацию для прокрутки страницы вверх по щелчку.

Если хотите оставить кнопку статичной, то просто добавьте кнопку-ссылку и оставьте код для анимации. Прятать её не надо.

Не подключайте slim-версию jQuery, так как в ней недоступны эффекты анимации!