При прочтении статей с большим количеством информации встает необходимость установки кнопки прокрутки страницы. Кнопки скроллинга помогают быстро вернуться к началу страницы, перейти в конец или двигаться по блокам текста. Такую прокрутку можно сделать разными способами, их мы и рассмотрим.
Способ №1. Классическая кнопка «Вверх» с якорем-ссылкой
В редакторе шаблона в заголовке (header.php) перед закрывающимся тегом </head> либо в подвале (footer.php) перед </body> нужно поместить html-код:
<div><a id='top'/></div>
Здесь id является идентификатором ссылки. Там же располагаем и формируем ссылку кнопки, при нажатии на которую мы перейдем к якорю.
<div><a href="#top" class="idTop">ВВЕРХ</a></div>
Аналогичная схема применяется при работе с содержанием в статье, нажимая на пункты которого, мы отправляемся к нужному месту в тексте.
Ну а теперь посредством CSS стилей придаем ссылке вид и задаем ей необходимые характеристики.
a.idTop {
position: fixed; /*фиксация положения*/
z-index: 9999; /*отображение поверх всех элементов*/
bottom: 0%; /*положение снизу*/
right: 0%; /*размещение справа или слева (left)*/
background: #0b208a; /*фоном может быть также изображение*/
opacity: .5; /*прозрачность*/
color: #fff; /*цвет текста*/
padding: 8px; /*отступы от внутренних краев*/
margin: 5px 15px 15px 5px; /*отступы от внешних краев*/
}
a.idTop:hover {
opacity: 1;
}
Вместо текста «ВВЕРХ» можно использовать любое изображение, например стрелки. Тогда предыдущую ссылку заменяем на:
<div><a href="#top" class="idTop"><img src='.../ваше изображение.png'/>
</a></div>
Этот способ достаточно легкий и не требует подключения библиотек и плагинов, тормозящих загрузку сайта. Единственным его недостатком является резкий переход к началу страницы. Результат:
See the Pen
Кнопка прокрутки 1 by Svetlana (@svetalk)
on CodePen.
Способ №2. Прокрутка «Вверх» с плавным переходом
Для плавного перехода к началу страницы необходимо подключиться к библиотеке jQuery и прописать Javascript.
See the Pen
Кнопка прокрутки2 by Lana Solas (@lanasolas)
on CodePen.
Теперь при нажатии на кнопку прокрутки не будет резкого рывка к началу.
Способ №3. Кнопка прокрутки вверх и вниз
Зачастую возникает необходимость в прокрутке страницы не только вверх, но и вниз. Для этого прописываются коды для двух кнопок:
See the Pen
Кнопка прокрутки 3 by Lana Solas (@lanasolas)
on CodePen.
Способ №4. Кнопка прокрутки «перевертыш»
Оригинальность этого метода заключается в том, что на середине текста кнопка поворачивается либо вверх, либо вниз.
See the Pen
Кнопка прокрутки4 by Lana Solas (@lanasolas)
on CodePen.
Способ №5. Кнопка прокрутки наверх и вниз
Нужно учесть, что кнопка прокрутки страницы в некоторых браузерах может не отразится. Выберите оптимальный вариант для себя, используйте свои характеристики и изображения кнопки скроллинга страниц.
