» »

Кнопка вверх сайта ucoz похоже как на Vk


Кнопка вверх сайта ucoz похоже как на Vk

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

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

Идем в админ панель - стили CSS и прописываем стиль на наш материал:
Код
.scrolltotop__side { position:fixed; width:3%; height:100%; top:0; left:0; background: black; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0.2); -moz-opacity:0.1; -khtml-opacity:0.1; opacity:0.1}  
.scrolltotop__arrow { position:fixed; width:3%; height:100%; top:50px; left:0; background:url(http://zornet.ru/CSS-ZORNET/ND/vi4-674.png) top no-repeat; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.4)"; filter:alpha(opacity=0.4); -moz-opacity:0.4; -khtml-opacity:0.4; opacity:0.4}

Этот код нужно прописать в низ сайта:
Код
<script type="text/javascript">  
jQuery(document).ready(function(){  
jQuery('body').append("<div class='scrolltotop'><div class='scrolltotop__side'></div><div class='scrolltotop__arrow'></div></div>");  
jQuery(window).scroll(function(){  
if (jQuery(this).scrollTop() > 350) {  
jQuery('.scrolltotop').fadeIn();  
} else {  
jQuery('.scrolltotop').fadeOut();  
}  
});  
jQuery('.scrolltotop').click(function(){  
jQuery("html, body").animate({ scrollTop: 0 }, 600);  
return false;  
});  
});0  
</script>




На этом все!
Источник: http://csomsk.ru
12.08.2014 Просмотров: 1957 Комментарий: (8)

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

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

Комментарий: 7
kredit-oformi
kredit-oformi 10.09.2014 00:101
0
Спасибо. работает как часы все четко
Kosten
Kosten 10.09.2014 00:272
0
kredit-oformi, дизайн стрелки только у скрипта сменил. Но надо быть в чем то хоть быть оригинальным. bye
kredit-oformi
kredit-oformi 10.09.2014 04:513
0
Kosten, правда стрелка по душе вот тут она мне кажется вписывается как никогда лучше
Kosten
Kosten 10.09.2014 13:474
0
kredit-oformi, что то вообще не вижу не какой..
kredit-oformi
kredit-oformi 10.09.2014 14:515
0
Kosten, левая панель разве нету ? blink
Kosten
Kosten 10.09.2014 19:266
0
kredit-oformi, есть.. кстати прикольно смотрится и для сайта нужная тема.
kredit-oformi
kredit-oformi 10.09.2014 20:027
0
Kosten, тоже нравится
avatar