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

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

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

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

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

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

Для этого нужно открыть файл с кодом страницы вашего сайта. Если ваш сайт сделан на 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 пикселей и серую рамку для блока всплывающей формы с id= «form_pop_up»

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

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

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

impuls-web.ru

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

Скачать исходники для статьи можно ниже

Для примера возьмем стандартную wordpress тему – Twenty Eleven.

Вот так будет выглядеть создаваемая нами кнопка:


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

Демо-пример можно посмотреть тут:

http://mnogoblog7.p.ht/

 

Приступим:

1. Заходим в файл стилей style.css – для этого входим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл style.css.

После в самый низ файла style.css вставим следующий код:

  .add_comment {   display:block;   width:30px;   height:150px;   position:fixed;   left:0;   top:200px;   z-index: 99999;  }  

Где:
width:30px; – ширина кнопки.
height:150px; – высота кнопки.
left:0; – отступ слева, если вы поменяете данную строчку на right:0;  – то кнопка будет располагаться справа, также можно указать отступ в пикселях, например: left:20px;
top:200px; – верхний отступ.
z-index: 99999; – задает расположение элемента поверх всех остальных, например у картинки шапки в теме Twenty Eleven данный параметр имеет значение 9999 и если ваша кнопка будет иметь значение ниже данного параметра, то она будет располагаться под ней.

Также можно добавить строчку:

background:#2B96C6; – она задает фон кнопки, можно задать как цвет, так и картинку.


 

2. Заходим в файл header.php – – для этого входим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл header.php.

В нем сразу после тега body вставляем вывод нашей кнопки:

  <a href="ссылка на открываемую страничку" class="add_comment">Текст кнопки</a>  

Как видите это код обычной ссылки, только для нее задан особый класс –
class=”add_comment”, стиль оформления которого мы прописали в пункте 1 данной статьи.

 

3.Чтобы придать дизайн кнопке, нужно создать для нее изображение.

Можно скачать кнопку в интернете и подкорректировать ее в Photoshope (или другом графическом редакторе), как я и сделал для данной кнопки, незабываем, что размер кнопки мы задаем в файле стилей style.css (пункт 1 данной статьи), в данном примере она имеет размеры: 30*150 px, следовательно и изображение для кнопки должно быть 30*150 px.

У меня получилось следующее изображение:

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

Можете скачать ее и попробовать вставить ее к себе на сайт или на тестовый сайт на каком-нибудь бесплатном хостинге (я так пользуюсь hostinger.ru).


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

  <a href="ссылка на открываемую страничку" class="add_comment"><img alt="buttons" src="https://mnogoblog.ru/wp-content/uploads/2013/04/buttons.gif" /></a>  

Вот и готова наша кнопочка, осталось только добавить ссылку на нужную нам страничку, например так:

  <a href="https://mnogoblog.ru/ob-avtore" class="add_comment"><img alt="buttons" src="https://mnogoblog.ru/wp-content/uploads/2013/04/buttons.gif" /></a>  

Все готово!

PS: Как сделать, чтобы кнопка была не видна на конкретной страничке.
В файл header.php нужно прописать следующее.
В данном примере, кнопка будет не видна на записи с id=1 – как посмотреть какой id у записи? – достаточно в панели управления wordpress зайти в пункт “Записи”, подпункт “Все записи”, открыть в Редакторе нужную запись и в адресной строке браузера у вас отобразиться id записи, например, если в адресной строке видим следующее “https://mnogoblog.ru/wp-admin/post.php?post=1&action=edit”, соответственно id странички равен 1.


  <?php  if(is_single(1)) {  // если запись имеет ID=1  include 'single-290.php';  } else {    ?>  <a href="https://mnogoblog.ru/ob-avtore" class="add_comment"><img alt="buttons" src="https://mnogoblog.ru/wp-content/uploads/2013/04/buttons.gif" /></a>      <?php } ?>  

mnogoblog.ru

г. Ульяновск « 26» декабрь 1982 г. +

Настоящая Политика конфиденциальности персональных данных (далее – Политика конфиденциальности) действует в отношении всей информации, которую Интернет-магазин «Видео курсы», расположенный на доменном имени www.fedorvasilev.com, может получить о Пользователе во время использования сайта Интернет-магазина, программ и продуктов Интернет-магазина.+

1. ОПРЕДЕЛЕНИЕ ТЕРМИНОВ

1.1. В настоящей Политике конфиденциальности используются следующие термины:
1.1.1. «Администрация сайта Интернет-магазина (далее – Администрация сайта) » – уполномоченные сотрудники на управления сайтом, действующие от имени Васильев Федор Александрович, который организует и (или) осуществляет обработку персональных данных, а также определяет цели обработки персональных данных, состав персональных данных, подлежащих обработке, действия (операции), совершаемые с персональными данными.
1.1.2.
ерсональные данные» — любая информация, относящаяся к прямо или косвенно определенному или определяемому физическому лицу (субъекту персональных данных).
1.1.3. «Обработка персональных данных» — любое действие (операция) или совокупность действий (операций), совершаемых с использованием средств автоматизации или без использования таких средств с персональными данными, включая сбор, запись, систематизацию, накопление, хранение, уточнение (обновление, изменение), извлечение, использование, передачу (распространение, предоставление, доступ), обезличивание, блокирование, удаление, уничтожение персональных данных.
1.1.4. «Конфиденциальность персональных данных» — обязательное для соблюдения Оператором или иным получившим доступ к персональным данным лицом требование не допускать их распространения без согласия субъекта персональных данных или наличия иного законного основания.
1.1.5. «Пользователь сайта Интернет-магазина (далее ‑ Пользователь)» – лицо, имеющее доступ к Сайту, посредством сети Интернет и использующее Сайт интернет-магазина.
1.1.6. «Cookies» — небольшой фрагмент данных, отправленный веб-сервером и хранимый на компьютере пользователя, который веб-клиент или веб-браузер каждый раз пересылает веб-серверу в HTTP-запросе при попытке открыть страницу соответствующего сайта.
1.1.7. «IP-адрес» — уникальный сетевой адрес узла в компьютерной сети, построенной по протоколу IP.+


2. ОБЩИЕ ПОЛОЖЕНИЯ

2.1. Использование Пользователем сайта Интернет-магазина означает согласие с настоящей Политикой конфиденциальности и условиями обработки персональных данных Пользователя.
2.2. В случае несогласия с условиями Политики конфиденциальности Пользователь должен прекратить использование сайта Интернет-магазина.
2.3. Настоящая Политика конфиденциальности применяется только к сайту Интернет-магазина Видео курсы. Интернет-магазин не контролирует и не несет ответственность за сайты третьих лиц, на которые Пользователь может перейти по ссылкам, доступным на сайте Интернет-магазина.
2.4. Администрация сайта не проверяет достоверность персональных данных, предоставляемых Пользователем сайта Интернет-магазина.+

3. ПРЕДМЕТ ПОЛИТИКИ КОНФИДЕНЦИАЛЬНОСТИ

3.1. Настоящая Политика конфиденциальности устанавливает обязательства Администрации сайта интернет-магазина по неразглашению и обеспечению режима защиты конфиденциальности персональных данных, которые Пользователь предоставляет по запросу Администрации сайта при регистрации на сайте интернет-магазина или при оформлении заказа для приобретения Товара.
3.2. Персональные данные, разрешённые к обработке в рамках настоящей Политики конфиденциальности, предоставляются Пользователем путём заполнения регистрационной формы на Сайте интернет-магазина Видео курсы в разделе Платные курсы и включают в себя следующую информацию:
3.2.1.
милию, имя, отчество Пользователя;
3.2.2. контактный телефон Пользователя;
3.2.3. адрес электронной почты (e-mail);
3.2.4. адрес доставки Товара;
3.2.5. место жительство Пользователя.
3.3. Интернет-магазин защищает Данные, которые автоматически передаются в процессе просмотра рекламных блоков и при посещении страниц, на которых установлен статистический скрипт системы («пиксель»):
· IP адрес;
· информация из cookies;
· информация о браузере (или иной программе, которая осуществляет доступ к показу рекламы);
· время доступа;
· адрес страницы, на которой расположен рекламный блок;
· реферер (адрес предыдущей страницы).
3.3.1. Отключение cookies может повлечь невозможность доступа к частям сайта Интернет-магазина, требующим авторизации.
3.3.2. Интернет-магазин осуществляет сбор статистики об IP-адресах своих посетителей. Данная информация используется с целью выявления и решения технических проблем, для контроля законности проводимых финансовых платежей.
3.4. Любая иная персональная информация неоговоренная выше (история покупок, используемые браузеры и операционные системы и т.д.) подлежит надежному хранению и нераспространению, за исключением случаев, предусмотренных в п.п. 5.2. и 5.3. настоящей Политики конфиденциальности.+

4. ЦЕЛИ СБОРА ПЕРСОНАЛЬНОЙ ИНФОРМАЦИИ ПОЛЬЗОВАТЕЛЯ


4.1. Персональные данные Пользователя Администрация сайта интернет-магазина может использовать в целях:
4.1.1. Идентификации Пользователя, зарегистрированного на сайте Интернет-магазина, для оформления заказа и (или) заключения Договора купли-продажи товара дистанционным способом с Видео курсы.
4.1.2. Предоставления Пользователю доступа к персонализированным ресурсам Сайта интернет-магазина.
4.1.3. Установления с Пользователем обратной связи, включая направление уведомлений, запросов, касающихся использования Сайта интернет-магазина, оказания услуг, обработка запросов и заявок от Пользователя.
4.1.4. Определения места нахождения Пользователя для обеспечения безопасности, предотвращения мошенничества.
4.1.5. Подтверждения достоверности и полноты персональных данных, предоставленных Пользователем.
4.1.6. Создания учетной записи для совершения покупок, если Пользователь дал согласие на создание учетной записи.
4.1.7. Уведомления Пользователя Сайта интернет-магазина о состоянии Заказа.
4.1.8. Обработки и получения платежей, подтверждения налога или налоговых льгот, оспаривания платежа, определения права на получение кредитной линии Пользователем.
4.1.9. Предоставления Пользователю эффективной клиентской и технической поддержки при возникновении проблем связанных с использованием Сайта интернет-магазина.
4.1.10. Предоставления Пользователю с его согласия, обновлений продукции, специальных предложений, информации о ценах, новостной рассылки и иных сведений от имени Интернет-магазина или от имени партнеров Интернет-магазина.
4.1.11. Осуществления рекламной деятельности с согласия Пользователя.
4.1.12. Предоставления доступа Пользователю на сайты или сервисы партнеров Интернет-магазина с целью получения продуктов, обновлений и услуг.+

5. СПОСОБЫ И СРОКИ ОБРАБОТКИ ПЕРСОНАЛЬНОЙ

5.1. Обработка персональных данных Пользователя осуществляется без ограничения срока, любым законным способом, в том числе в информационных системах персональных данных с использованием средств автоматизации или без использования таких средств.
5.2. Пользователь соглашается с тем, что Администрация сайта вправе передавать персональные данные третьим лицам, в частности, курьерским службам, организациями почтовой связи, операторам электросвязи, исключительно в целях выполнения заказа Пользователя, оформленного на Сайте интернет-магазина « Видео курсы», включая доставку Товара.
5.3. Персональные данные Пользователя могут быть переданы уполномоченным органам государственной власти Российской Федерации только по основаниям и в порядке, установленным законодательством Российской Федерации.
5.4. При утрате или разглашении персональных данных Администрация сайта информирует Пользователя об утрате или разглашении персональных данных.
5.5. Администрация сайта принимает необходимые организационные и технические меры для защиты персональной информации Пользователя от неправомерного или случайного доступа, уничтожения, изменения, блокирования, копирования, распространения, а также от иных неправомерных действий третьих лиц.
5.6. Администрация сайта совместно с Пользователем принимает все необходимые меры по предотвращению убытков или иных отрицательных последствий, вызванных утратой или разглашением персональных данных Пользователя.+

6. ОБЯЗАТЕЛЬСТВА СТОРОН

6.1. Пользователь обязан:
6.1.1. Предоставить информацию о персональных данных, необходимую для пользования Сайтом интернет-магазина.
6.1.2. Обновить, дополнить предоставленную информацию о персональных данных в случае изменения данной информации.
6.2. Администрация сайта обязана:
6.2.1. Использовать полученную информацию исключительно для целей, указанных в п. 4 настоящей Политики конфиденциальности.
6.2.2. Обеспечить хранение конфиденциальной информации в тайне, не разглашать без предварительного письменного разрешения Пользователя, а также не осуществлять продажу, обмен, опубликование, либо разглашение иными возможными способами переданных персональных данных Пользователя, за исключением п.п. 5.2. и 5.3. настоящей Политики Конфиденциальности.
6.2.3. Принимать меры предосторожности для защиты конфиденциальности персональных данных Пользователя согласно порядку, обычно используемого для защиты такого рода информации в существующем деловом обороте.
6.2.4. Осуществить блокирование персональных данных, относящихся к соответствующему Пользователю, с момента обращения или запроса Пользователя или его законного представителя либо уполномоченного органа по защите прав субъектов персональных данных на период проверки, в случае выявления недостоверных персональных данных или неправомерных действий.+

7. ОТВЕТСТВЕННОСТЬ СТОРОН

7.1. Администрация сайта, не исполнившая свои обязательства, несёт ответственность за убытки, понесённые Пользователем в связи с неправомерным использованием персональных данных, в соответствии с законодательством Российской Федерации, за исключением случаев, предусмотренных п.п. 5.2., 5.3. и 7.2. настоящей Политики Конфиденциальности.
7.2. В случае утраты или разглашения Конфиденциальной информации Администрация сайта не несёт ответственность, если данная конфиденциальная информация:
7.2.1. Стала публичным достоянием до её утраты или разглашения.
7.2.2. Была получена от третьей стороны до момента её получения Администрацией сайта.
7.2.3. Была разглашена с согласия Пользователя.+

8. РАЗРЕШЕНИЕ СПОРОВ

8.1. До обращения в суд с иском по спорам, возникающим из отношений между Пользователем сайта Интернет-магазина и Администрацией сайта, обязательным является предъявление претензии (письменного предложения о добровольном урегулировании спора).
8.2 .Получатель претензии в течение 30 календарных дней со дня получения претензии, письменно уведомляет заявителя претензии о результатах рассмотрения претензии.
8.3. При не достижении соглашения спор будет передан на рассмотрение в судебный орган в соответствии с действующим законодательством Российской Федерации.
8.4. К настоящей Политике конфиденциальности и отношениям между Пользователем и Администрацией сайта применяется действующее законодательство Российской Федерации.+

9. ДОПОЛНИТЕЛЬНЫЕ УСЛОВИЯ

9.1. Администрация сайта вправе вносить изменения в настоящую Политику конфиденциальности без согласия Пользователя.
9.2. Новая Политика конфиденциальности вступает в силу с момента ее размещения на Сайте интернет-магазина, если иное не предусмотрено новой редакцией Политики конфиденциальности.
9.3. Все предложения или вопросы по настоящей Политике конфиденциальности следует сообщатьschool@fedorvasiliev.ru
9.4. Действующая Политика конфиденциальности размещена на странице по адресу https://fedorvasilev.com.+

Обновлено «11» декабрь 2014 г.+

fedorvasilev.com

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

sayt-s-nulya.ru

Поступил вопрос от одного из подписчиков: «Как создать фиксированную кнопку на сайте, похожую на эту?»

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

Чаще всего такие кнопки прикрепляют к одной из стенок (правой или левой) сайта.

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

Вот тот код, который нужно разместить на свою веб-страницу:

<div id='follow'>  <a href='//twitter.com' target='_blank'>  <img src='https://s5.postimg.org/5glnpd73r/1489642981_twitter.png'  border=0 alt='Следи за мной на  Twitter' title='Следи за мной на Twitter' /></a>  </div>

Я разместил его перед закрывающим тэгом </body>. Если вы используете шаблон wordpress, то это можно сделать в файле footer.php вашей темы.

Что собой представляет этот код?

По сути, мы просто создали блок div с идентификатором follow. Содержанием этого блока является та самая картинка-ссылка, которую мы и хотим сделать фиксированной.

Все. По HTML части мы закончили.

Теперь остается только с помощью средств CSS, сделать этот блок фиксированным.

Вот тот код, который для этого необходим.

#follow {  margin: 0px;  background: e6eeee;  z-index: 2;  position: fixed;  top: 0px;  left: 0px;  }

Его нужно добавить в файл стилей, который у вас используется. Например, style.css.

z-index: 2 – необходим для того, чтобы на небольших мониторах кнопка располагалась поверх основного текста.

Основной эффект достигается за счет применения свойства position: fixed, которое делает блок фиксированным и заданием точного местоположения блока (top: 0px; left: 0px;).

Вот и все. Как видите, используется минимальное количество кода.

Далее. Следующие уроки по CSS.

webgyry.info

Боковая кнопка для сайта

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

  1. Откройте на редактирование файл style-css (Таблица стилей). Переместитесь в конец его содержимого. Начните создание с новой строки;
  2. Во первых, зададим имя стилю:
    #left-button {
    Знак «решётка», является обязательным элементом начала имени стиля, а левая фигурная скобка ставится через пробел, открываясь для параметров CSS;
  3. С новой строки введём целый ряд параметров нового стиля:
    position: fixed;
    z-index: 9999;
    width: 30px;
    height: 200px;
    overflow: hidden;
    left: 0px;
    top: 200px;Первый параметр «position» задаст позицию на экране – fixed, фиксированные координаты отображения (сами координаты задаются значениями в left, top, z-index). Параметрами Width– height задайте ширину и высоту соответственно, значения укажите в пикселях, равное разрешению картинки кнопки;
  4. Отредактируте вышеуказанные параметры в соответствии с вашими условиями. После закройте стиль правой фигурной скобкой « } ».
  5. Сохраните изменения в файле CSS. И перейдите к встраиванию кода кнопки, лучшим вариантом будет вставка перед закрывающимся тегом «HEAD»;
  6. Конструкция кода кнопки будет выглядеть следующим образом:
    <divid=”left-button”>
    код кнопки (HTMLкод изображения или текста)
    </div>Тем самым применяем созданный стиль к ранее созданному коду изображения кнопки;

Анимация по наведению курсора мышки

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

  1. Следуя прошлым инструкциям, перейдите к созданию нового стиля. Имя указывается неизменным, но с добавлением параметра:
    #left-button:hover {В конце через двоеточие, указывается параметр «по наведению курсора»;
  2. Следовательно, во втором стиле содержимое параметров корректируется в соответствии с условиями анимации кнопки (стоит поэкспериментировать, чтобы добиться требуемого эффекта):
  3. В первом и втором стиле будет полезно воспользоваться внешним и внутренним отступом, которые настроят позиционирование и смогут реализовать движение.

Статический вариант отображения кнопки

Для того чтобы просто вывести графическую кнопку, необязательно создавать новые стили. Достаточно, применить его при вставке кода кнопки перед закрывающим тегом «HEAD»:

<divstyle=»position: fixed; z-index: 9999; width: 30px; height: 200px; overflow: hidden; left: 0px; top: 220px;»>
Код кнопки (HTML код картинки или текста)
</div>

Вместо послесловия

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

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

wd-x.ru

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

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

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

1. Простая кнопка «Наверх» без JavaScript

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

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

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

Пример CSS кода:

Недостатки:

— Кнопки сделанные с применением JavaScript могут быть плавающими и появляться сразу как только пользователь спустился немного в низ по странице, а в приведенном примере она будет отображаться постоянно.

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

Плюсы данного вида кнопки:

+ Для работы кнопки не нужно задействовать скрипты и большие, по объему, библиотеки. И это очень большой плюс.

2. Кнопка наверх с помощью jQuery

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

Кнопка работает в браузерах начиная с версий Firefox 3.0.10 — 3.6.13, Internet Explorer 7 и 8, Google Chrome, Jquery 1.4.3. К сожалению кнопка не работает в IE 6, а оно вам надо 🙂 ?

JQuery JavaScript код:

Представленный ниже код вам необходимо вставить переде тегом </head> на всех страницах вашего сайта. Если библиотека jQuery уже подключена к вашему сайту, то первую строчку добавлять не нужно.

CSS код:

Чтобы придать красивый внешний вид кнопке необходимо добавить следующие стили. Их лучше всего добавить в файл стилей вашего сайта.

HTML код:

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

3. UItoTop JQuery плагин

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

В представленном архиве находится 3 папки: css — файл стилей кнопки, img — изображение и папка js в которой находятся 4 JavaScript файла.

Подключение JavaScript файлов:

Распакуйте скачанный архив с исходниками в какую либо папку вашего сайта.  Для задействования плагина нам достаточно подключить три из имеющихся js файлов. Для их подключения перед закрывающим тегом </body> добавьте следующие пути к файлам:

Пути ведущие к файлам исправьте в соответствии с тем в каком каталоге располагаются файлы плагина.

Обратите внимание, если ранее вы уже подключили к своему сайту библиотеку jQuery, то добавлять следующий код не нужно:

Добавление CSS:

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

Первый способ это добавить на все страницы вашего сайта между тегами <head></head> ссылку на CSS файл стилей:

Не забудьте только изменить путь к файлу.

Второй способ это скопировать все содержимое файла ui.totop.css и вставить его в файл CSS  стилей вашего сайта. Второй способ будет более рациональным так как не требует подключения лишних файлов.

4. Кнопки прокрутки вверх и вниз на JQUERY

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

В скачанном архиве будут находится все файлы необходимые для функционирования кнопки. Это CSS, JS файлы и файлики изображений стрелок. 

Подключить HTML:

Для начала нужно разместить HTML код вызова кнопок, на всех страницах сайта. Для этого поместите нижерасположенный текст сразу перед тегом </body>.

Подключение JavaScript:

Сразу после HTML кода, перед тегом </body> разместите код вызова необходимых JavaScript файлов и JQuery код.

Пути ведущие к JS файлам необходимо заменить на свои.

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

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

Подключение CSS:

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

А самым лучшим вариантом будет скопировать стили этого файла и вставить их в файл стилей своего сайта.

5. Кнопка плавной прокрутки вверх при помощи JQuery

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

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

Теперь разберемся, что нужно сделать для подключения кнопки к сайту

Изображение:

Вам понадобится изображение самой кнопки можете взять любое, а можете использовать вот это: icon_top.png

HTML код:

Для вызова кнопки после основного контента страницы или перед тегом </body> разместите следующий HTML код:

CSS стили:

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

JQuery:

Для начала подключаем библиотеку, если она еще не подключена для вашего сайта. Для этого между тегами <head>…</head>? вставляем следующее:

Затем сразу после подключения библиотеки необходимо расположить следующий  код JQuery:

Первый ScrollTop — определяет текущее вертикальное положение полосы прокрутки и если оно становится больше 100 px, то автоматически появляется кнопка. Если хотите чтобы она появлялась раньше или позже изменить в необходимую сторону это значение. 

Как вы видите есть еще два параметра — 0 — значит страница будет прокручена вверх до самого начала до нулевого пикселя, а 600 — это скорость анимации в миллисекундах.

Источник:  http://gazpo.com/2012/02/scrolltop/

6. Анимированная кнопка перехода вверх

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

Для создания кнопки используется изображение стрелки, CSS стили и JQuery.

Изображение:

Изображение стрелки использующееся для кнопки можете взять здесь: up-arrow.png

HTML код:

Для вызова кнопки используется следующий HTML код:

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

И еще один важный момент, касающийся HTML кода. Тегу <body> вы должны присвоить идентификатор top.

В случае если тегу <body> уже присвоен определенный id, тогда в коде вызова кнопки, размещенном чуть выше, #top нужно заменить на #ваш-id

CSS код:

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

JQuery код:

Первая строчка это подключение библиотеки JQuery, если у вас она уже подключена, то эту строчку не добавляйте. Остальной код добавьте между тегами <head>…</head>

При необходимости можете изменить следующие параметры:

  • 100 — это количество пикселей, после прокрутки которого появляется кнопка;
  • 0 — это значит что прокрутка будет производится до нулевого пикселя т. е. до самого верха.
  • 800 — это скорость прокрутки в миллисекундах. 

7. Полупрозрачная кнопка при помощи JQuery и CSS

Большая полупрозрачная кнопка вверх появляющаяся при скроллинге по центру страницы. Не заметить ее трудно. Сделана только при помощи JQuery и CSS.

Разбираемся с HTML:

Для работы кнопки основное содержимое страницы, которое должно прокручиваться, необходимо поместить между двумя тегами:

CSS код:

Здесь ничего особенного нет, просто вставьте данный код в файл CSS стилей вашего  сайта.

jQuery код:

Первая строчка  — это подключение библиотеки, если к вашему сайту она уже подключена значит опускаем ее. Весь код помещаем между тегами <head>…</head>.

Источник: http://briancray.com/posts/scroll-to-top-link-jquery-css/

Расширения для Joomla и плагины для WordPress позволяющие создавать кнопку «Наверх». 

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

Расширения для Joomla:

Scroll to Top: http://extensions.joomla.org/extensions/structure-a-navigation/site-navigation/24769

Skyline Scroll to Top: http://extensions.joomla.org/extensions/structure-a-navigation/site-navigation/19772

Top of the Page: http://extensions.joomla.org/extensions/structure-a-navigation/site-navigation/16807

Плагины для WordPress:

Найти самые популярные плагины для создания такого функционала вы сможете по ссылке:  http://wordpress.org/plugins/tags/scroll-to-top

Материал подготовлен проектом: WebMasterMix.ru

webmastermix.ru

Установка плагина

Плагин устанавливается также как и любой другой: переходим в раздел «Плагины» — «Добавить новый». Затем, в строку поиска вбиваем Floating button и устанавливаем его.

Настройка

После установки, справа в консоле управления вашим сайтом на вордпресс появляется дополнительная вкладка Floating button:

1

Нажимаем её и начинаем настраивать плавающую кнопку:

1. Button state — включение и выключение отображения кнопки;

2. Settings source — эта настройка отвечает за дальнейший функционал плагина. Если выбрать «Local settings», то функционал будет весьма ограничен, поэтому рекомендуется выбрать второй вариант «Settings from probtn.com»;

3. Теперь нужно зарегистрироваться на сайте разработчиков плагина — это не займёт много времени, зато функционал кнопки wordpress значительно расширится.

Регистрация на сайте разработчиков

Переходим на страницу https://admin.probtn.com/login/new и заполняем адрес электронной почты, имя и пароль и нажимаем кнопку «Create»:

2

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

После регистрации и входа на сайт мы видим следующую страницу:

3

Две кнопочки внизу отвечают одна за создание плавающей кнопки, вторая — за создание опроса, который будет появляться при нажатии на плавающую кнопку.

Начнём с создания, поэтому нажимаем «Create Floating Button». Сначала указываем название кнопки:

4

Далее, указываем значок, который будет в дальнейшем нашей плавающей кнопкой:

5

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

На следующем этапе выбираем платформу для отображения кнопки. Мы установили плагин на сайт, поэтому и будем выбирать вариант отображения на домене, который укажем:

6

Завершаем первоначальную настройку нажатием кнопки «Submit».

Указываем действие, после нажатие на плавающую кнопку и продолжаем настройку плагина

После создания, наша кнопочка отображается в консоле слева:

7

В разделе TOOL указываем адрес, который будет открыт в всплывающем окне после нажатия на кнопочку:

8

Или указываем опрос, который можно создать по клику на ссылку «Create survey»:

9

Дальше идёт настройка внешнего вида и расположения кнопки:

10

Сохраняем все сделанные изменения на каждом шаге. Установленная на сайте плавающая кнопка может выглядеть так:

11

А при нажатии на неё появляется следующее всплывающее окно:

12

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

Плагин находится по ссылке http://wordpress.org/plugins/profit-button/. Успехов!

п.с. если вам нужна помощь по настройке или установке — пишите свои вопросы в комментарии. Помощь бесплатна!

saitoseoteka.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector