При создании сайтов иногда некоторые страницы получаются очень длинными. Для сайтов с длинными страницами целесообразно установить кнопку «вверх», при нажатии на которую происходит плавный возврат к началу страницы. Это очень удобно.
В поисках решения этого вопроса в интернете оказалось достаточно много способов установки таких кнопок. Но на практике не все способы срабатывали, хотя делаешь всё по инструкции. Одна из причин, которую я заметил, это сам шаблон сайта. Они по своей конструкции отличаются друг от друга.
Приведу для примера только те способы, которые сам испытывал в работе на нескольких сайтах.
Первый способ.
Это, на мой взгляд, самый простой способ. Кнопка будет появляться в правом нижнем углу сайта при прокрутке страницы вниз. После возврата страницы к началу, кнопка исчезает.
1. Подключаем библиотеку jQuery. В админке сайта открываем в редакторе файл footer.php и перед тегом </body> вставляем следующий код:
1 2 3 | <script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> |
2. Сразу ниже этого кода вставляем скрипт, который отвечает за плавное появление и скрытие кнопки:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <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. Этим кодом мы выводим изображение самой кнопки на сайте:
1 2 3 4 5 | <a id="Go_Top" style="position: fixed; bottom: 25px; right: 1px; cursor: pointer; display: none;" href="#"> </a> |
Не забудьте заменить в в коде «ваш сайт.ru» на домен своего сайта. И не забудьте нажать на кнопку «Обновить файл». Всё, все три кода будут находиться в одном файле footer.php.
5. И последнее. Откройте в редакторе файл style.css и в самом низу вставьте код, который пропишет стиль расположения кнопки:
1 2 3 4 5 6 7 8 9 | /* Стили привязываем к элементу с id='Go_Top' */ #Go_Top { position: fixed; /* Положение кнопки */ bottom: 60px; /* Расстояние снизу */ right: 10px; /* Расстояние справа */ cursor: pointer; /* Лучше не трогать */ } |
Обновляем для сохранения файл и проверяем работу. Повторюсь еще раз, что возможно не для всех шаблонов подойдёт такой метод.
Кнопки вверх и вниз.
Сейчас рассмотрим вариант установки двух кнопок — вверх и вниз. Установим эти кнопки с плавным появлением и плавной прокруткой. Установка этих кнопок ничем практически не отличается от приведённого выше способа.
Для корректной работы кнопок вверх и вниз рекомендуется в начале кода скрипта указать тип документа:
1 2 3 4 5 | &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 следует следующим образом:
1 2 3 | </script><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> |
После подключения библиотеку jQuery, добавьте в конец Вашей странички JavaScript код, который будет отвечать за прокрутку, появление и исчезновение кнопок вверх и вниз:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <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> |
Теперь найдите и скачайте в интернете две кнопки, которые будете устанавливать, это всё на Ваш вкус. Подготовленные кнопки загрузите лучше в корневую папку. Остается только добавить и описать эти кнопки для прокрутки странички вверх и вниз. Делается это так:
1 2 3 4 5 6 7 8 9 10 | <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>
Статья была полезной?