» »

Кнопка вверх и вниз в синем цвете


Кнопка вверх и вниз в синем цвете

Очень удобная кнопка у которой состоят функций при нажатие на ее она подымает страницу и так же ее опускает при нажатие стрелки в низ. Создана была под светлый дизайн сайта. Но не факт что она и на темный не подойдет. Просто не проверено. Она будит располагаться в правом нижнем углу монитора или сайта как вам удобней.
Установка скрипта:
Все коды а их два, они будут в нижней части сайта. Начнем с первого, его прописываем в низ сайта.
Код
<script type="text/javascript">  
jQuery(function(){  
  $("#Go_Top").hide().removeAttr("href");  
  if ($(window).scrollTop()>="200") $("#Go_Top").fadeIn("slow")  
  $(window).scroll(function(){  
  if ($(window).scrollTop()<="200") $("#Go_Top").fadeOut("slow")  
  else $("#Go_Top").fadeIn("slow")  
  });  

  $("#Go_Bottom").hide().removeAttr("href");  
  if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow")  
  $(window).scroll(function(){  
  if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow")
  else $("#Go_Bottom").fadeIn("slow")  
  });  

  $("#Go_Top").click(function(){  
  $("html, body").animate({scrollTop:0},"slow")  
  })  
  $("#Go_Bottom").click(function(){  
  $("html, body").animate({scrollTop:$(document).height()},"slow")  
  })  
});  
</script>

И сразу где прописали первый код, под ним прописываем и второй, это будит код с кнопкой.
Код
<a style='position: fixed; bottom: 60px; right: 1px; cursor:pointer; display:none;'  
href='#' id='Go_Top'>  
  <img src="http://zornet.ru/CSS-ZORNET/ZR/up_vverkh.png" alt="Вверх" title="Вверх">  
</a>  
<a style='position: fixed; bottom: 20px; right: 1px; cursor:pointer; display:none;'  
href='#' id='Go_Bottom'>  
  <img src="http://zornet.ru/CSS-ZORNET/ZR/down_vniz.png" alt="Вниз" title="Вниз">  
</a>
06.08.2013 Просмотров: 743 Комментарий: (2)

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

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

Комментарий: 2
kredit-oformi
kredit-oformi 21.05.2014 16:521
0
кнопка смотрится отлично на белом фоне, а что немаловажно достаточно легко установить ))кнопка
Kosten
Kosten 21.05.2014 16:572
0
Только для ресурсов у которых сайт фиксирован по ширине.
avatar