Кнопка вверх и вниз с плавным появлением и плавной прокруткой - Создание и продвижение сайтов TopWebDesign

Информация о материале: Просмотров: 8882

Для того чтобы кнопки вверх и вниз работали, в начале файла со скриптом должен быть указан DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
или
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Обратите внимание, что кнопка вверх плавно появляется только тогда, когда страничка прокручена вниз на указанное число пикселей и плавно пропадет, если страничка была прокручена вверх выше указанного значения в пикселях.

Кнопка вниз, наоборот, изначально видна и плавно исчезает, когда страничка прокручивается вниз ниже указанного значения и плавно появляется, когда страничка была прокручена вверх выше определенного значения.

При нажатии на кнопку вверх или вниз осуществляется плавная прокрутка странички в заданном направлении, а не резкий перескок к началу или концу странички.

Также нужно подключить библиотеку jQuery. Данная библиотека реализует плавную прокрутку странички вверх и вниз, а также позволяет делать плавное появление и исчезновение кнопок. Подключать библиотеку jQuery следует следующим образом:

<script language="JavaScript" type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

Кнопки для прокрутки странички вверх и вниз рекомендуем размещать в самом конце странички перед тегом </body>. Это позволит увеличить скорость загрузки основного содержимого Вашего сайта.

После подключения библиотеку jQuery, добавьте в конец Вашей странички JavaScript код, который будет отвечать за прокрутку, появление и исчезновение кнопок вверх и вниз:

<script language="JavaScript" type="text/javascript">
var go_down = jQuery('body');
jQuery(function() {
  $("#Go_Top").hide().removeAttr("href");
  if ($(window).scrollTop() >= "250") $("#Go_Top").fadeIn("slow")
  var scrollDiv = $("#Go_Top");
  $(window).scroll(function() {
   if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")
   else $(scrollDiv).fadeIn("slow")
  });
  $("#Go_Bottom").hide().removeAttr("href");
  if ($(window).scrollTop() <= go_down.height()-"999") $("#Go_Bottom").fadeIn("slow")
  var scrollDiv_2 = $("#Go_Bottom");
  $(window).scroll(function() {
   if ($(window).scrollTop() >= go_down.height()-"999") $(scrollDiv_2).fadeOut("slow")
   else $(scrollDiv_2).fadeIn("slow")
  });
  $("#Go_Top").click(function() {
   $("html, body").animate({scrollTop: 0}, "slow")
  })
  $("#Go_Bottom").click(function() {
   $("html, body").animate({scrollTop: go_down.height()}, "slow")
  })
});
</script>

Теперь остается добавить и описать кнопки для прокрутки странички вверх и вниз:

<a style='position: fixed; bottom: 60px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
 <img src="/image/up.png" alt="Наверх" title="Наверх">
</a>
<a style='position: fixed; bottom: 20px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Bottom'>
 <img src="/image/bottom.png" alt="Вниз" title="Вниз">
</a>