Кнопки прокрутки вверх и вниз

В этой теме речь пойдет о кнопке для прокрутки страницы вверх и вниз.

Вот сам код который мы ставим в баннерную позицию (я использую позицию №3).

<script type="text/javascript">

jQuery(function(){

 $("#Go_Top").hide().removeAttr("href");

 if ($(window).scrollTop()>="250") $("#Go_Top").fadeIn("slow")

 $(window).scroll(function(){

  if ($(window).scrollTop()<="250") $("#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="АДРЕС КАРТИНКИ НАВЕРХ" alt="Наверх" title="Наверх">

</a>

<a style='position: fixed; bottom: 20px; right: 1px; cursor:pointer; display:none;'

href='#' id='Go_Bottom'>

 <img src=" АДРЕС КАРТИНКИ ВНИЗ" alt="Вниз" title="Вниз">

</a>

Не забываем ставить свои картинки стрелочек вверх и вниз.

На некоторых сайтах (которые созданы не на Fo.Ru) может понадобиться подключать библиотеку jQuery.
Для этого перед кодом кнопок ставим следующий код

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 

09.05.2013
Просмотров (1321)
Яндекс.Метрика
© Copyright 2013 - 2017 Уроки Fo.Ru