Москва, Строительный проезд, 7А кор. 4 Работаем: 24/7 +7 495 744 67 74

Плавающая кнопка, блок для сайта

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

<a class=”start” href=”#”><img src=”picture”></a>

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

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

.start {
position:fixed; 
z-index: 99999; 
}  

Далее, в зависимости от места расположения кнопки, определяем ее расположение. Так, для кнопки, которая будет располагаться слева от тела сайта необходимо добавить left и отступ сверху – top:

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

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

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

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

<div class=”block_start”>
Содержание блока
</div>

CSS

.block_start {
background: #382d25;
border: 1px solid #382d25;
border-radius: 6px;
box-shadow: 0px 0px 8px #382d25;
font-size:14px;
padding: 5px 5px 0;
position: fixed;
right: 25px;
text-align: center;
top:25px;
width: 96px;
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/тема/ Сам код я чаще всего устанавливаю непосредственно перед тегом </body>, но Вы же можете разместить его где считаете нужным, главное, чтобы он был между тегами <body>…</body>.
Теперь переходим к стилям. Копируем их и размещаем в файле настроек шаблона – как правило, это файлы layot.css, template.css или general.css папки CSS или styles

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

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

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

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

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

<a href="#" id="toTop"><img src=http://наш_сайт/images/up1.png border="0" align="absmiddle" /></a>
<script src="/ваш_сайт /js/toTop.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
});
</script> 

Чтобы не получилось путаницы, я специально изменил 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. Сделать это можно при помощи следующей строки

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

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

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

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


адрес

г. Москва, Строительный пр., 7Ак4

телефон

+7 495 744 67 74Круглосуточно
Яндекс.Метрика

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