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

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

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

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

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

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

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

3. Теперь Вам надо найти подходящую картинку для кнопки, размером примерно 50 х 50 рх, любую которая Вам понравится. Эту картинку надо загрузить на сайт. Можно сразу грузить в корень сайта, т.е. туда где у Вас установлен WordPress. Вам необходимо будет для следующего шага знать название картинки и путь к её расположению. К примеру имя картинки будет knopka.png Если картинка загружена в корень сайта, то путь к ней указывается так — http://ваш сайт.ru/knopka/png. С помощью этого адреса выведем кнопку на сайте.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

Статья была полезной?