» »

Круглая кнопка вверх в 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
08.10.2014 Просмотров: 1954 Комментарий: (6)

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

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

Комментарий: 6
kredit-oformi
kredit-oformi 08.10.2014 08:071
0
несколько мес.назад я вообще не знал что все это существует blink wink
Kosten
Kosten 08.10.2014 17:162
0
Slavik, бывает у всех такое king
kredit-oformi
kredit-oformi 31.12.2014 00:483
0
кнопку установил в контейнер нижняя часть сайта в самый перед и все отлично работает
DeadMoras
DeadMoras 31.12.2014 01:144
0
Вот это кода......Лишние "буквы"
Kosten
Kosten 31.12.2014 01:425
0
DeadMoras, что вы имеете виду, просто для меня не понятен, сам смысл поста.
kredit-oformi
kredit-oformi 31.12.2014 10:156
0
DeadMoras, объясни
avatar