Задача. Нужно сделать простую кнопку для прокрутки страницы вверх на HTML + CSS, не используя JavaScript.
Решение. Простое решение в Код №1. Нужно разместить два блока: один — будет меткой (якорем) куда будет прокручиваться страница, а второй — непосредственно кнопкой для скрола вверх.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!-- Оба div'а можно разместить вместе в начале body --> <div id="top-scroll"></div> <!-- Блок якорь к которому будет прокручиваться экран --> <a href="#top-scroll" class="idTop">ВВЕРХ</a> <!-- кнопка скрола --> <style> html {scroll-behavior: smooth;} /* Плавная прокрутка (еще не всеми браузерами поддерживается) */ a.idTop { background: #f69524; /* Цвет фона (можно задать изображение) */ color: #fff; /* Цвет текста */ position: fixed; /* Фиксированное позиционирование кнопки */ z-index: 9999; /* Сверху всех элементов*/ right: 0%; /* Положение справа */ bottom: 0%; /* Положение снизу */ opacity: .5; /* Прозрачность */ margin: 13px; padding: 8px; border-radius: 8px; } a.idTop:hover { opacity: 1; } </style> |
Вместо «ВВЕРХ» можно вставить иконку — <span class="dashicons dashicons-arrow-up-alt2"></span>, но тогда нужно их подключить для вывода на сайте (в functions.php добавить Код №2), т.к. по умолчанию Dashicons выводятся только в админ-панели.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function wpcr_my_dashicons() { wp_enqueue_style( 'dashicons' ); } add_action( 'wp_enqueue_scripts', 'wpcr_my_dashicons' ); /* !! Если в functions.php уже есть подключение стилей, то просто добавить туда строку ниже */ wp_enqueue_style( 'dashicons' ); |