Кнопка «Вверх» для сайта без плагина

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

Всю работу можно разделить на 4 этапа:

1. Поиск картинки

Для начала потребуется найти картинку, которую хотите использовать в качестве кнопки «Наверх». Для этого можете набрать в Yandex картинках поисковый запрос: «Кнопка наверх для сайта». В моем случае, я выбрал такую картинку:

Кнопка наверх для сайта

Далее, необходимо ее закинуть на ваш сайт. Переходите в админ панель WordPress, нажмите Медиафайлы и загрузите картинку. Скопируйте ссылку на картинку.

Кнопка наверх для сайта2. Код в Footer.php

Как создается Html кнопка наверх? Для этого необходимо  зайти в файловый менеджер вашего сайта и открыть файл Footer.php. Перед закрывающим тегом </body> нужно вставить вот такой код:

Вместо ссылки, вставляете ссылку вашей картинки. Сохраняете файл.

3. Код в Header.php

Теперь нужно открыть файл header.php, перед тегом </head>, я вставил, вот такой код:

4. Позиционирование кнопки

Теперь можете проверить свой сайт, кнопка должна появиться, но она находится не совсем там, где нужно. Для этого ее нужно спозиционировать. Откройте файл Style.css и в  самом низу добавьте такие строчки:

Width — устанавливает ширину блочных элементов

Top  — устанавливает толщину границы сверху

Right: — задает расположение блока

Position: fixed — позволяет зафиксировать элемент и создать плавающую кнопку Наверх.

Подставляя свои значения, вы добьетесь нужных результатов.

Плавный скролл к якорю  JQUERY.

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

В корне вашего сайта создайте файл, с расширение js. И поместите в него, вот такой код

Теперь откройте файл Header.php и после строчки

Добавьте строчку

/js/file.js — здесь укажите свой полный путь к файлу file.js, который мы создали выше.

Теперь при нажатии на кнопку «Наверх», вы плавно переместитесь вверх сайта.

Есть несколько плагины для прокрутки сайта с помощью​ кнопки на вверх

Если возникнут вопросы, вы можете написать в комментариях.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

RSS
Follow by Email
Facebook
Twitter