Круглая кнопка вверх для сайта
 | |
| На некоторых сайтах просто необходима кнопка вверх и эта функция будет полезна, чтоб самому не поднимать страницы, когда по клику подниматься. Это простая по своему дизайн, форме круга, что в стилях выставлена такая форма и с эффектом при наведение. Где вы сами меняете оттенок цвета на ней и здесь у кого подключены шрифтовые иконки, то вы можете поставить ее. Плюсы на ней, она не будет пропадать, если вы остановились на прочтение материала. У нее заданы параметры, где она исчезает, также вы сами можете поставить по центру иконку и выставить значение, где она должна появляться, а где исчезать. Здесь нет не одной ссылки, только стили идут на ее и сам скрипт, который и будет выдавать весь функционал, это также касается и скорости. Для тех кто еще не подключил шрифтовые иконки, то подключаем, копируем стили и ставим вверх сайта в самый потолок. Код <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> Нижняя часть сайта Код <script> function _goTop() { $('<span id="go-top" class="fa fa-angle-up" 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: 30px; height: 30px; width: 30px; text-align: center; font-size: 16px; cursor: pointer; transition: all .3s ease; border-radius: 50%; } #go-top:hover { background: #4CAF50; } Установка кнопки завершена, перезагружаем страницу и радуемся этой функций. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
