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

Чтобы кнопка, блок (далее просто кнопка) не изменяла своего положения независимо от прокрутки страницы – как бы плыла по материалам сайта, ей необходимо задать позицию (position ) и разместить ее, поверх все элементов. Но прежде чем перейдем непосредственно к стилям CSS создадим объект для наших экспериментов. Пускай это будет некая картинка (picture), которая является отправной точкой к какому-то действию

html-код составили, теперь попытаемся ее заставить плавать.

И так, с нам уже известно, что фиксированное позиционирование позволяет элементу сохранять свое положение при прокрутке странице, а чтобы он был всегда на переднем плане – необходимо задать большое числовое значение параметру z-index . Делаем это для нашей кнопки:

.start { position :fixed ; z-index : 99999 ; } .start { left :0 : position:fixed ; top :200 px ; z-index : 99999 ; }

Если же нам нужно кнопку разместить справа, то вместо left нужно задать right, а именно:

.start { position :fixed ; right :0 ; top :200 px ; z-index : 99999 ; }

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

Содержание блока

CSS

.block_start { background : #382d25 ; border : 1 px solid #382d25 ; border-radius : 6 px ; box-shadow : 0 px 0 px 8 px #382d25 ; font-size :14 px ; padding : 5 px 5 px 0 ; position : fixed ; right : 25 px ; text-align : center ; top :25 px ; width : 96 px ; z-index : 99999 ; }

Прокомментируем свойства параметров. Положение блока указали при помощи position: fixed; z-index: 99999; и разместили его справа сверху — right: 25px; top:25px. Ширина блока (width) равна 96 пикселей. Оформление его задается параметрами – background, border, border-radius, box-shadow. И в завершение, чтобы наш текст внутри блока размещался посредине и имел поля, был одного размера, записали font-size:14px; padding: 5px 5px 0; text-align: center.

Теория – это хорошо, подумали Вы, но вот как это внедрить в реальность? Для примера, допустим у нас есть два сайта – один CMS Joomla, другой – WordPress. Ну что же, установим для Joomla

Установка на CMS Joomla

html-код кнопки необходимо разместить в шаблоне сайта – это файл index.php, что находиться вот здесь — ваш_сайт/templates/тема/ Сам код я чаще всего устанавливаю непосредственно перед тегом , но Вы же можете разместить его где считаете нужным, главное, чтобы он был между тегами ….
Теперь переходим к стилям. Копируем их и размещаем в файле настроек шаблона – как правило, это файлы layot.css, template.css или general.css папки CSS или styles

Установка на CMS WordPress

В панели управления сайтом, справа, ищем раздел “Внешний вид”, потом ”Редактор” и открываем файл footer.php и добавляем наш html-код кнопки.
Стиль оформления кнопки, точно так же, помещаем в файл оформления шаблона – файл style.css который размещен wp-content/themes/ваша_тема/style.css или через админ-панель, в разделе “Внешний вид”->”Редактор”, файл style.css.

И в завершение, сделаем так, чтобы наша кнопка стала «Вверх» и исчезала, когда полоса прокрутки находится в самом верху.

“Кнопка Наверх” / “Кнопка Вверх” для сайта

Чтобы при нажатии на нашу кнопку нас перемещало на верх, необходимо в html-код добавить java-скипт

$(function () { $("#toTop" ).scrollToTop(); });

Чтобы не получилось путаницы, я специально изменил class на id=»toTop». Содержание файла toTop.js следующее

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(«href»);if($(window).scrollTop()!=»0″){$(this).fadeIn(«slow»)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==»0″){$(scrollDiv).fadeOut(«slow»)}else{$(scrollDiv).fadeIn(«slow»)}});$(this).click(function(){$(«html, body»).animate({scrollTop:0},»slow»)})}});

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

Теперь разберемся со стилями. Раз это кнопка «вверх», размещаем ее внизу окна, справа – bottom и right.

#toTop { background : none ; bottom : 20 px ; cursor : pointer ; position : fixed ; right : 2 px ; }

Ну на это точно все! Надеюсь Вы теперь знаете что и как нужно сделать, чтобы отправить в плавание свой «кораблик».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Достоинства:

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

Недостатки:

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

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

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

< a href = "#" title = "Вернуться наверх" class = "buttonup" > < img src = "путь к картинке/картинка.png" > < / a >

Buttonup { width:88px; height:118px; position:fixed; bottom:20px; right:50px; }

Buttonup {

width : 88px ;

height : 118px ;

position : fixed ;

bottom : 20px ;

right : 50px ;

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

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

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

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

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

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

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

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

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

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

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

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

jQuery(document).ready(function($){ $(""+ "..png) 0 0 no-repeat; }" + ".scrollTop:hover{ background-position:0 -133px;}" +"").appendTo("body"); var speed = 550, $scrollTop = $("").appendTo("body"); $scrollTop.click(function(e){ e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate({ scrollTop: 0}, speed); }); //появление function show_scrollTop(){ ($(window).scrollTop() > 330) ? $scrollTop.fadeIn(700) : $scrollTop.fadeOut(700); } $(window).scroll(function(){ show_scrollTop(); }); show_scrollTop(); });

jQuery (document ) . ready (function ($ ) {

$ ("" +

".scrollTop{ display:none; z-index:9999; position:fixed;" +

"bottom:20px; left:90%; width:88px; height:125px;" +

"background:url(https://сайт/img/arrow.png) 0 0 no-repeat; }" +

".scrollTop:hover{ background-position:0 -133px;}"

+ "" ) . appendTo ("body" ) ;

speed = 550 ,

$ scrollTop = $ ("" ) . appendTo ("body" ) ;

$ scrollTop . click (function (e ) {

e . preventDefault () ;

$ ("html:not(:animated),body:not(:animated)" ) . animate ({ scrollTop : 0 } , speed ) ;

} ) ;

//появление

function show_scrollTop () {

($ (window ) . scrollTop () > 330 ) ? $ scrollTop . fadeIn (700 ) : $ scrollTop . fadeOut (700 ) ;

$ (window ) . scroll (function () { show_scrollTop () ; } ) ;

show_scrollTop () ;

} ) ;

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

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

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

Здравствуйте, уважаемые посетители!

Я продолжаю публиковать статьи технической тематики.

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

Нужна ли

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

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

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

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

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

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

Кнопка вверх, как Вконтакте

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

Такой вариант уже зарекомендовал себя, так как практически нет пользователей, которые ей не пользуются в соц. сети Вконтакте. Удобна данная реализация тем, что не приходится целиться курсором мышки на какую-то кнопку. Достаточно просто кликнуть на левую область сайта и страница прокрутится в самый верх. Нет необходимости даже следить за курсором, можно просто двинуть мышью в самый край экрана и кликнуть один раз.

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

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

Для загрузки скрипта можно разместить сам код между тегами или перед закрывающим тегом в файле footer.php. А можно просто загрузить файл со скриптом на хостинг, а затем просто сделать загрузку файла на сайте.

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

JavaScript

$(document).ready(function() { $("body").append("^ Наверх"); $ (window).scroll (function () { if ($ (this).scrollTop () > 300) { $ (".button-up").fadeIn(); } else { $ (".button-up").fadeOut(); } }); $(".button-up").click(function(){ $("body,html").animate({ scrollTop: 0 }, 100); return false; }); $(".button-up").hover(function() { $(this).animate({ "opacity":"1", }).css({"background-color":"#E1E7ED","color":"#45688E"}); }, function(){ $(this).animate({ "opacity":"0.7" }).css({"background":"none","color":"#45688E"});; }); });

$ (document ) . ready (function () {

$ ("body" ) . append ("^ Наверх" ) ;

$ (window ) . scroll (function () {

if ($ (this ) . scrollTop () > 300 ) {

$ (".button-up" ) . fadeIn () ;

} else {

$ (".button-up" ) . fadeOut () ;

} ) ;

$ (".button-up" ) . click (function () {

$ ("body,html" ) . animate ({

scrollTop : 0

} , 100 ) ;

return false ;

} ) ;

$ (".button-up" ) . hover (function () {

$ (this ) . animate ({

"opacity" : "1" ,

} ) . css ({ "background-color" : "#E1E7ED" , "color" : "#45688E" } ) ;

} , function () {

$ (this ) . animate ({

"opacity" : "0.7"

} ) . css ({ "background" : "none" , "color" : "#45688E" } ) ; ;

} ) ;

} ) ;

В данном коде можно изменить некоторые параметры под себя.

  • Строка 4 отвечает за вывод самой области для прокрутки страницы. В ней прописаны основные стили для отображения кнопки. в принципе, данные параметры должны подойти практически каждому. Но может потребоваться и отредактировать их под себя;
  • В строке 7 в скобках имеется число 300, которое отвечает за момент появления кнопки. То есть, кнопка будет появляться только после прокрутки 300 пикселей вниз. Рекомендую тут подобрать такое значение, чтобы прокрутка была возможной только тогда, когда с поля зрения пропадает основное меню сайта или какие-то другие важные элементы в навигации;
  • В строке 17 значение 100 отвечает за скорость прокрутки. Чем меньше значение, тем быстрее возвращение вверх страницы.

Данный код можно разместить между тегами в верхушке сайта. Если сайт на WordPress то данная область находится в файле шаблона header.php. Также можно разместить перед закрывающим тегом в самом низу сайта (файл footer.php). Последний вариант я и рекомендую, так как он позволит ускорить загрузку сайта. Выглядеть будет это так.

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

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

JavaScript

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


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

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

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

Второй способ кнопки наверх от Вконтакте

По данному способу я записал подробный видео-урок.

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

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

Состоит из 3х этапов:

  • Размещение скрипта на сайте;
  • Размещение кода, отвечающего за вывод кнопки;
  • Оформление с помощью CSS стилей.

    • Для начала мы должны разместить скрипт, который будет делать плавность прокрутки и плавное изменение цвета при наведении, как самой области, так и цвета сова "Наверх" в зависимости от дальности прокручивания страницы вниз.

    Можно пойти 2мя путями, как и в первом случае. Либо разместить сам скрипт в нужной области (см. пункт выше) либо же сделать загрузку скрипта через файл. Далее мы будем делать все именно через второй способ, чтобы было эффективно.

    Файл скрипта скачайте по кнопке ниже.

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

    ⇓ Назад ⇑ Наверх

    < div class = "leftbar-wrap" >

    < a href = "#0" id = "scroll-back" >

    < span class = "active-area" >

    < span class = "bar-desc-niz" > ⇓Назад< / span >

    < / span >

    < / a >

    < a href = "#" class = "left-controlbar" >

    < span class = "active-area" >

    < span class = "bar-desc-top" > ⇑Наверх< / span >

    < / span >

    < / a >

    Разместить его можно в самом низу сайта, перед закрывающим тегом в файле footer.php.

    Затем прописываем стили оформления в свой файл стилей (style.css) и загружаем все измененные файлы на хостинг. Вот сами стили.

    /* описание контейнера */.leftbar-wrap { position: fixed; height: 100%; top: 0; width: 99px !important; left: 0; } /* описание кнопки «Вверх» */.left-controlbar { height: 100%; display: block; text-decoration: none; } /* описание кнопки «Вернуться» */#scroll-back { display: block; height: 100%; top: 0; display: none; text-align: center; } /* описание столбца фонового цвета для обеих кнопок */.active-area { width: 100px; height: 100%; display: block; text-align: center; } /* задаем прозрачность фонового цвета при наведении на активную область страницы */.leftbar-wrap:hover .active-area { background: #E1E7ED !important; opacity:0.7 !important; } /* делаем подсветку немного ярче при наведении на надпись */.leftbar-wrap .active-area:hover { } /* центрируем надпись у кнопок */.bar-desc-niz { top: 26% !important; position: relative; display: inline-block; } .bar-desc-top { top: 10% !important; position: relative; display: inline-block; }

    /* описание контейнера */

    Leftbar-wrap {

    position : fixed ;

    height : 100% ;

    top : 0 ;

    width : 99px !important ;

    left : 0 ;

    /* описание кнопки «Вверх» */

    Left-controlbar {

    height : 100% ;

    display : block ;

    text-decoration : none ;

    /* описание кнопки «Вернуться» */

    #scroll-back {

    display : block ;

    height : 100% ;

    top : 0 ;

    display : none ;

    text-align : center ;

    /* описание столбца фонового цвета для обеих кнопок */

    Active-area {

    width : 100px ;

    height : 100% ;

    display : block ;

    text-align : center ;

    /* задаем прозрачность фонового цвета при наведении на активную область страницы */

    Leftbar-wrap:hover .active-area {

    background : #E1E7ED !important ;

    opacity : 0.7 !important ;

    /* делаем подсветку немного ярче при наведении на надпись */

    Leftbar-wrap .active-area:hover {

    /* центрируем надпись у кнопок */

    Bar-desc-niz {

    top : 26% !important ;

    position : relative ;

    display : inline-block ;

    Bar-desc-top {

    top : 10% !important ;

    position : relative ;

    display : inline-block ;

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

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

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

    Третий способ кнопки наверх без плагина

    Реализация кнопки также очень простая и 100% работает на сайте WordPress. По поводу HTML сайта или другого движка сказать не могу. Тестируйте.

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

    JavaScript

    $(document).ready(function(){ $("#back-top").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $("#back-top").fadeIn(); } else { $("#back-top").fadeOut(); } }); $("#back-top a").click(function () { $("body,html").animate({ scrollTop: 0 }, 400); return false; }); }); });

    < p id = "back-top" > < a href = "#top" > < span > < / span > < / a > < / p >

    Подключать себе такой функционал заказчик не хотел. Ему просто надо была кнопка, после нажатия на которую, появлялось бы модальное окно с формой заказа. Кнопки обратного звонка - это очень полезная вещь. Благодаря им, человек может заказать звонок себе не тратя свои деньги, что есть важным для нашего человека:). По сути, такую кнопку можно сделать и для возвращения наверх страницы и для кнопки помощи и тд. Главный элемент тут будет - анимация, пульсирующий эффект.

    09.09.2016 Добавлена новая кнопка, на старой не работал эффект пульсации в новом Хроме.

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

    УВАЖАЕМЫЕ МАСТЕРА! Имейте совесть, если используете данную кнопку, то хотя бы картинку трубки телефонной заливайте себе на хостинг, а не тупо копируете ссылку на мой сайт. Таких умельцев и их сайты прославлю на весь интернет 🙂

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

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

    Onclick="return false;"

    Теперь в файл стилей надо добавить сами стили CSS .

    #popup__toggle{bottom:25px;right:10px;position:fixed;z-index:999;} .img-circle{background-color:#29AEE3;box-sizing:content-box;-webkit-box-sizing:content-box;} .circlephone{box-sizing:content-box;-webkit-box-sizing:content-box;border: 2px solid #29AEE3;width:150px;height:150px;bottom:-25px;right:10px;position:absolute;-webkit-border-radius:100%;-moz-border-radius: 100%;border-radius: 100%;opacity: .5;-webkit-animation: circle-anim 2.4s infinite ease-in-out !important;-moz-animation: circle-anim 2.4s infinite ease-in-out !important;-ms-animation: circle-anim 2.4s infinite ease-in-out !important;-o-animation: circle-anim 2.4s infinite ease-in-out !important;animation: circle-anim 2.4s infinite ease-in-out !important;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;} .circle-fill{box-sizing:content-box;-webkit-box-sizing:content-box;background-color:#29AEE3;width:100px;height:100px;bottom:0px;right:35px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation: circle-fill-anim 2.3s infinite ease-in-out;-moz-animation: circle-fill-anim 2.3s infinite ease-in-out;-ms-animation: circle-fill-anim 2.3s infinite ease-in-out;-o-animation: circle-fill-anim 2.3s infinite ease-in-out;animation: circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;} .img-circle{box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;bottom: 14px;right: 49px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;opacity: .7;} .img-circleblock{box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;background-image:url(images/mini.png);background-position: center center;background-repeat:no-repeat;animation-name: tossing;-webkit-animation-name: tossing;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;} .img-circle:hover{opacity: 1;} @keyframes pulse {0% {transform: scale(0.9);opacity: 1;} 50% {transform: scale(1); opacity: 1; } 100% {transform: scale(0.9);opacity: 1;}} @-webkit-keyframes pulse {0% {-webkit-transform: scale(0.95);opacity: 1;} 50% {-webkit-transform: scale(1);opacity: 1;} 100% {-webkit-transform: scale(0.95);opacity: 1;}} @keyframes tossing { 0% {transform: rotate(-8deg);} 50% {transform: rotate(8deg);} 100% {transform: rotate(-8deg);}} @-webkit-keyframes tossing { 0% {-webkit-transform: rotate(-8deg);} 50% {-webkit-transform: rotate(8deg);} 100% {-webkit-transform: rotate(-8deg);}} @-moz-keyframes circle-anim { 0% {-moz-transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;-moz-opacity: .1;-webkit-opacity: .1;-o-opacity: .1;} 30% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;-moz-opacity: .5;-webkit-opacity: .5;-o-opacity: .5;} 100% {-moz-transform: rotate(0deg) scale(1) skew(1deg);opacity: .6;-moz-opacity: .6;-webkit-opacity: .6;-o-opacity: .1;}} @-webkit-keyframes circle-anim { 0% {-webkit-transform: rotate(0deg) scale(0.5) skew(1deg);-webkit-opacity: .1;} 30% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);-webkit-opacity: .5;} 100% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);-webkit-opacity: .1;}} @-o-keyframes circle-anim { 0% {-o-transform: rotate(0deg) kscale(0.5) skew(1deg);-o-opacity: .1;} 30% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);-o-opacity: .5;} 100% {-o-transform: rotate(0deg) scale(1) skew(1deg);-o-opacity: .1;}} @keyframes circle-anim { 0% {transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;} 30% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;} 100% {transform: rotate(0deg) scale(1) skew(1deg); opacity: .1;}} @-moz-keyframes circle-fill-anim { 0% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;} 50% {-moz-transform: rotate(0deg) -moz-scale(1) skew(1deg);opacity: .2;} 100% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}} @-webkit-keyframes circle-fill-anim { 0% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2; } 50% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2; } 100% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}} @-o-keyframes circle-fill-anim { 0% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;} 50% {-o-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;} 100% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}} @keyframes circle-fill-anim { 0% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;} 50% {transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;} 100% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}

    Первые 7 строк отвечают за внешний вид кнопки, далее уже анимация. В первой строке можно настроить расположение кнопки, а в шестой строке указываете путь к изображению в параметре background-image:url(mini.png) .

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

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

    На этом все, спасибо за внимание. 🙂

    P.S.
    Я решил создать плагин, который поможет Вам без проблем получить нужный результат. Можете перейти и посмотреть:

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

    Ловить звонки в не рабочее время — введенные номера в не рабочее время будут распределяться между менеджерами в рабочее время. Менеджер получит звонок и автоответчик сообщит ему, что был заказан звонок в не рабочее время и соединит с потенциальным клиентом.

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

    Плавающая кнопка «Телефон» — всегда на сайте в определенном месте видна кнопка, при нажатии на которую можно ввести номер и связаться с отделом продаж. Мы рекомендуем использовать данную функцию.

    Настройка окна виджета — Вы можете выбрать 2 варианта показа виджета: Вариант «Окно» и «На весь экран». Так же, выбрать цветовую схему и изменить надпись на виджете. Мы рекомендуем использовать информацию о скидках и акциях, что бы мотивировать клиента оставлять номер для связи.

    Виджет обратного звонка «На весь экран»

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

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

    Разрешать несколько звонков для клиента — может ли один и тот-же клиент звонить Вам несколько раз? ДА/НЕТ Клиент определяется по браузеру.

    Изменить время «Мы перезвоним вам за … сек» — Вы можете изменить время, за которое обещаете позвонить клиенту в большую или меньшую сторону.

    Предлагать звонок 1 клиенту не чаще 1 раза за… — если у Вас включена функция «Ловить посетителя на выходе», то можно указать интервал, что бы не раздражать посетителя всплывающим окном каждый раз.

    Принимать звонки из СНГ и Европы — Если Вы работаете только на Российском рынке, мы рекомендуем не включать эту функцию. Если Вам нужны клиенты из других стран, то включайте. Для остальных стран (кроме России), за одну минуту разговора будет списываться: Украина — 3 минуты, Казахстан — 2 минуты, Беларусь — 4 минуты, все другие страны — 5 минут.

    Имя виджета для отчетов — Если вы используйте несколько виджетов на одном домене.

    Появиться сообщение. Обращаем внимание, что код на сайте обновлять не нужно!

    Настройка виджета завершена

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

    Виджет в личном кабинете

    Теперь нужно установить код виджета на Ваш сайт.