» »

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


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

Очень элегантная и не большая Кнопка вверх для сайта ZR. Так как большие кнопки все меньше и меньше видно на сайтах. Почему то ставят небольшие кнопки. Это как видите большой не является и ее всегда будит видно на сайте, в этом и прелесть что она заметная. Будит 2 кода под два дизайна, светлый и темный.
Установка:
Под темный дизайн сайта.
Копируем код и вставляем его в нижнюю часть сайта:
Код
<a href="#" id="toTop"><img src="http://zornet.ru/CSS-ZORNET/3_zp_scrolltop.png" border="0" align="absmiddle" /></a>  
<script src="http://zornet.ru/CSS-ZORNET/vverx.js" type="text/javascript"></script>  
<script type="text/javascript">  
$(function() {  
$("#toTop").scrollToTop();  
});  
</script>

Стиль надо прописать в CSS
Код
#toTop {  
width: 20px;  
border-radius:6px;  
background: #191919;  
border: 1px solid #2a5d8e;  
text-align: center;  
padding: 5px;  
position: fixed;  
bottom: 10px;  
right: 10px;  
cursor: pointer;  
color: #000;  
text-decoration: none;  
}

Под светлый дизайн сайта.
В нижнюю часть сайта:
Код
<a href="#" id="toTop"><img src="http://zornet.ru/CSS-ZORNET/bel.png" border="0" align="absmiddle" /></a>  
<script src="http://zornet.ru/CSS-ZORNET/vverx.js" type="text/javascript"></script>  
<script type="text/javascript">  
$(function() {  
$("#toTop").scrollToTop();  
});  
</script>

В CSS
Код
#toTop {  
width: 20px;  
border-radius:6px;  
background: #fff;  
border: 1px solid #cccccc;  
text-align: center;  
padding: 5px;  
position: fixed;  
bottom: 10px;  
right: 10px;  
cursor: pointer;  
color: #000;  
text-decoration: none;  
}

На этом все!
20.06.2013 Просмотров: 825 Комментарий: (0)

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

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

Комментарий: 0
avatar