logo

Кнопка Вверх

При создании сайтов иногда некоторые страницы получаются очень длинными. Для сайтов с длинными страницами целесообразно установить кнопку "вверх", при нажатии на которую происходит плавный возврат к началу страницы. Это очень удобно.

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

Приведу для примера только те способы, которые сам испытывал в работе на нескольких сайтах.

Первый способ.

Это, на мой взгляд, самый простой способ. Кнопка будет появляться в правом нижнем углу сайта при прокрутке страницы вниз. После возврата страницы к началу, кнопка исчезает.

1. Подключаем библиотеку jQuery. В админке сайта открываем в редакторе файл footer.php и перед тегом </body> вставляем следующий код:

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

2. Сразу ниже этого кода вставляем скрипт, который отвечает за плавное появление и скрытие кнопки:

<script language="JavaScript" 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. Теперь Вам надо найти подходящую картинку для кнопки, размером примерно 50 х 50 рх, любую которая Вам понравится. Эту картинку надо загрузить на сайт. Можно сразу грузить в корень сайта, т.е. туда где у Вас установлен WordPress. Вам необходимо будет для следующего шага знать название картинки и путь к её расположению. К примеру имя картинки будет knopka.png Если картинка загружена в корень сайта, то путь к ней указывается так - http://ваш сайт.ru/knopka/png. С помощью этого адреса выведем кнопку на сайте.

4. Вставляем нижеприведенный код после скрипта, установленного в пункте 2.  Этим кодом мы выводим изображение самой кнопки на сайте:

<a id="Go_Top" style="position: fixed; bottom: 25px; right: 1px; cursor: pointer; display: none;" href="#">

</a>

Не забудьте заменить в в коде "ваш сайт.ru" на домен своего сайта. И не забудьте нажать на кнопку "Обновить файл". Всё, все три кода будут находиться в одном файле footer.php.

5. И последнее. Откройте в редакторе файл style.css и в самом низу вставьте код, который пропишет стиль расположения кнопки:

/* Стили привязываем к элементу с id='Go_Top' */
#Go_Top {
position: fixed; /* Положение кнопки */
bottom: 60px; /* Расстояние снизу */
right: 10px; /* Расстояние справа */
cursor: pointer; /* Лучше не трогать */
}

Обновляем для сохранения файл и проверяем работу. Повторюсь еще раз, что возможно не для всех шаблонов подойдёт такой метод.

Кнопки вверх и вниз.

Сейчас рассмотрим вариант установки двух кнопок - вверх и вниз. Установим эти кнопки с плавным появлением и плавной прокруткой. Установка этих кнопок ничем практически не отличается от приведённого выше способа.

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

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

Если у Вас уже прописан такой вид документа, то этот пункт можно пропустить. Ну а проверить, какой тип документа у вашего сайта, можно открыв исходный код страницы, посмотреть в самом начале тип Вашего документа.

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

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

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

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

<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'>
    
    </a>
    <a style='position: fixed; bottom: 20px; right: 1px; cursor:pointer; display:none;'
    href='#' id='Go_Bottom'>
    
    </a> 

Обратите внимание на размеры 60px и 20px, это расположение кнопок,т.е кнопка Вверх имеет отступ от низа страницы 60px, а кнопка Вниз будет располагаться ниже. Изменяя эти размеры, добъётесь нужного расположения кнопок. Не забудьте в коде прописать расположение картинок. Для примера можете посмотреть на этом сайте их работу, там вместо 60 и 20 выставлено 220рх и 180рх

И самое главное: все приведённые коды для удобства устанавливайте в файле footer.php перед закрывающим тегом </body>

Кнопка Вверх обновлено: Май 24, 2017 автором: admin

Оставить комментарий

▲Вверх