Стильная кнопка вверх на CSS для сайта
 | |
| Оригинальная кнопки вверх для сайта, где сам веб мастер может выставить на ней значение, также поставить иконку и поменять цветовую гамму. Не говоря о том, что сделать круглой, что идет по умолчанию, но выставить пиксели и она станет квадратная. Все очень хорошо редактируется на ней, скорость у нее больше плавная с ускорением. Здесь переменяется в дизайн красивый шрифт Awesome, где можете выставить другой класс и поменяется иконка. Проверил эту кнопку на сайте, то все отлично работает, цветовую гамму сменил, но потом оставил как идет, вы можете под свой дизайн поставить. Также сделать ее шире или наоборот меньше. Или подвинуть ближе к правой стороне или сделать наоборот. Ранее кнопка вверх были нарисована и выставлялись на ссылку, здесь как видим не одной нет и все теперь на стилях, что визуально смотрится и под адаптивность сайта будет отличным решением на любую тематику портала.  Приступаем к установке: Если у вас шрифтовые иконки подключены, то эти стили вам не нужно ставить. Но если нет, то выставляем их в Код <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> В низ сайта: Здесь в начале кода находим класс "class="fa fa-angle-up" Что отвечает за палец вверх, но у вас есть возможность поменять, ссылку выше представил где найти. Код <script> function _goTop() { $('<span id="go-top" class="fa fa-hand-pointer-o" title="Вверх!"></span>').appendTo('body'); $('#go-top').css({ 'opacity': '0', 'visibility': 'hidden' }); $(window).scroll(function() { if ($(this).scrollTop() > 500) { $('#go-top').css({ 'opacity': '1', 'visibility': 'visible' }); } else { $('#go-top').css({ 'opacity': '0', 'visibility': 'hidden' }); } }); $('#go-top').click(function() { $('body,html').animate({ scrollTop: 0 }, 800); return false }); }; _goTop(); </script> Таблицы стилей CSS: Код #go-top {background-color: #90A4AE; display: block; position: fixed; bottom: 20px; right: 20px; z-index: 9999; color: #fff; line-height: 40px; height: 40px; width: 50px; text-align: center; font-size: 17px; cursor: pointer; transition: all .3s ease; border-radius: 70%; } #go-top:hover { background: #4CAF50; } В стилях как раз все меняем и редактируем, это форма и оттенок цвета, также размер и положение, где кнопка находиться будет. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
