» »

Круглая кнопка вверх для сайта


Круглая кнопка вверх для сайта

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

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

Для тех кто еще не подключил шрифтовые иконки, то подключаем, копируем стили и ставим вверх сайта в самый потолок.

Код
<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; }

Установка кнопки завершена, перезагружаем страницу и радуемся этой функций.
14.04.2017 Просмотров: 362 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Scheme
Scheme 14.04.2017 00:351
0
А чем она от этой отличается, что стоит на сайте здесь?
Kosten
Kosten 14.04.2017 00:402
0
Да не чем по сути, тоже на стилях. только не на шрифтовых, но у меня глюк есть. который описал. Это кнопка, когда проматываешь кнопка визуально стоит и какое то время читаешь и вдруг замечаешь, что она исчезла, что крутанешь и тогда только появится. Эту ставил на тестовый и проверял на такую тему и не заметил этого.
Scheme
Scheme 14.04.2017 00:433
0
Так поменяй на этот вверх сайта, в чем дело стало.
tsakonter
tsakonter 14.04.2017 00:464
0
Лучше не стрелку поставить, а палец вверх, в шрифтовом разделе есть такая.
Kosten
Kosten 14.04.2017 00:485
0
Поменять не проблема, но как поставил. стараюсь не чего менять, но если работает, что ее трогать, не вижу в этом смысла. хотя и можно поменять. все равно та же функция останется..
avatar