MENU


Кнопка "Вверх"


Рассмотрим пример скрипта кнопки, которая служит для перехода вверх страницы сайта. Эта функция очень удобна, если Ваш сайт имеет очень длинные страницы.

Для начала Вам необходимо определить, подключена ли у Вас библиотека jQuery. Если не подключена, то необходимо будет её подключить. Ниже приведены три кода которые необходимо вставить последовательно друг за другом в самом конце кода страницы перед закрывающим тегом </body>.

Если у Вас на сайте подключена библиотека jQuery, то Вам надо только два кода вставить

1. JavaScript код подключения библиотеки jQuery:


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

2. JavaScript код, который отвечает за появление и исчезновение кнопки:


< script type="text/javascript">
$(function() {
 $.fn.scrollToTop = function() {
  $(this).hide().removeAttr("href");
  if ($(window).scrollTop() >= "250") $(this).fadeIn("slow")
  var scrollDiv = $(this);
  $(window).scroll(function() {
   if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")
   else $(scrollDiv).fadeIn("slow")
  });
  $(this).click(function() {
   $("html, body").animate({scrollTop: 0}, "slow")
  })
 }
});

$(function() {
 $("#Go_Top").scrollToTop();
});
< /script>

3. HTML код кнопки:


< a style="position: fixed; bottom: 25px; right: 1px; cursor:pointer; display:none;" href="#" id="Go_Top">
< img src="папка/картинка.png" alt="Наверх" title="Наверх">

Самостоятельно выберите картинку кнопки и пропишете её местоположение, т.е. адрес размещения картинки-кнопки, выделено красным цветом, где:

папка - это название папки в которой лежит картинка
картинка.phg - это имя файла картинки

После загрузки страницы кнопки не будет видно. Она появится после прокрутки страницы вниз. После нажатия на кнопку, страница вернётся в исходное состояние - вверх.

После копирования этих кодов, не забудьте убрать пробелы между скобками < >, иначе скрипт не сработает.