вЭлементы дизайна Юкоз

Круглая кнопка вверх в 6 вариантах

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

Их будет шесть, вам только нужно скопировать и прописать ссылку в код, который нужно будет установить. И чтоб при клике немного кнопка менялась и показывала что вы навели на ее, нам еще нужно будет прописать небольшой стиль, но все по порядку.

Копируем этот код и прописываем в низ вашего сайта, перед /body и сохраняем.

Код
<a href=»#» class=»top-button»><img alt=»наверх» src=»http://zornet.ru/CSS-ZORNET/vaccser/ds/top_button1.png» /></a>  
<script type=»text/javascript»>  
$(function()$.fn.scrollToTop=function()$(this).hide().removeAttr(«href»);if($(window).scrollTop()!=»0″)$(this).fadeIn(«slow»)var scrollDiv=$(this);$(window).scroll(function()if($(window).scrollTop()==»0″)$(scrollDiv).fadeOut(«slow»)else$(scrollDiv).fadeIn(«slow»)});$(this).click(function()$(«html, body»).animate(scrollTop:0,»slow»)})}});  
$(function()   
$(«.top-button»).scrollToTop();  
);  
  </script>

Потом идем в CSS и нужно поставить этот стиль:

Код
/* Кнопка наверх  
——————————————*/  
.top-button   
  margin:0px;  
  padding:0px;  
  position:fixed;  
  cursor: pointer;  
  bottom:25px;  
  right:50px;  

На этом все, теперь нам просто нужно выбрать саму кнопку, так как по умолчанию в коде стоит темная.

Источник: www.uotvet.ru

источник: zornet.ru

Похожие посты