» »

Скрипт кнопки вверх подъёма страниц uCoz

Скрипт кнопки вверх подъёма страниц uCoz

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

А это кнопка сделана для темного фона и здесь как раз все наоборот в плане эффектов. По умолчанию она уже появиться с белой тенью, но как вы только наведете, то будет простая кнопка без теней. Что сами можете найти материал виде изображение в формате PNG и изменить ее. Но здесь сразу скажу, что в CSS основная настройка идет под круглый элемент, но это все редактируется. Сам сменил ней дизайн. в сети нашел картинку. чтоб слишком яркая не была , где потом подогнал высоту и ширину. Как она работать будет, все представлено ниже.

Так будет по умолчанию:

Создать кнопку вверх на стилях CSS

Это уже в работе поднятие страницы:

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

Приступаем к установке:

Код в низ сайта:

Код
<a href="#" id="toTop"><img src="http://zornet.ru/zorner_ru_1/Abter/knopki/up-arrow-circle-hi.png" width="50" height="48" border="0" alt="Наверх" /></a>
<script src="http://zornet.ru/zorner_ru_1/Abter/knopki/toTop.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
});
</script>

Стили CSS:

Код
/*--------------------- Кнопка вверх ---------------------*/
#toTop {width: 49px; height: 48px; background: transparent;
position: fixed;bottom: 90px;right: 30px;text-align: center;
border:1px solid #fff;border-radius:49px;cursor: pointer;
-moz-box-shadow:0 0 10px 1px #eee; -webkit-box-shadow:0 0 10px 1px #eee;box-shadow:0 0 10px 1px #eee;}
#toTop:hover { -moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}

#toTop {width: 49px;height: 48px;background: rgba(0, 0, 0, 0);position: fixed;bottom: 90px;right: 30px;text-align: center;border: 1px solid #a9a3a3;border-radius:49px;cursor: pointer;-moz-box-shadow:0 0 10px 1px #131212;-webkit-box-shadow:0 0 10px 1px #eee;box-shadow: 0 0 10px 1px #fff;}
#toTop:hover { -moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}

Здесь разбито на стили, что вторые будут отвечать за визуальный эффект.
02.08.2017 Просмотров: 210 Комментарий: (2)

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

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

Комментарий: 2
Critic©
Critic© 05.08.2017 20:501
0
Этот скрипт белой кнопки пойдёт более для тёмного дизайна но не как для белого
Kosten
Kosten 05.08.2017 21:112
0
Но здесь поспорю, это сделано для темного фона, но можно все в стилях перекроить и выставить темный и вот уже на светлый фон отлично подойдет. Когда под кнопку идут CSS, что означает, самому можно еще как нужно под свой сайт редактировать.
avatar