Как сделать ненавязчивую кнопку прокрутки вверх

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

Эти кнопки обычно размещаются в нижнем углу сайтов, а затем при нажатии возвращают вас в верхнюю часть страницы. Их довольно легко создать с помощью JavaScript. Но визуально мы хотим, чтобы они были ненавязчивыми, однако при этом оставались достаточно большими, чтобы их можно было коснуться или кликнуть. Давайте рассмотрим несколько способов сделать это, начиная с простого, а затем улучшая вещи по ходу.

Вариант 1. Будьте проще

Сначала мы выбираем кнопку в JavaScript.

Теперь document.documentElement возвращает корневой элемент документа. Он нужен нам для получения значений смещения. Итак, теперь давайте сохраним его в переменной с именем rootElement- так будет проще вызывать код.

Мы добавим к кнопке прослушиватель событий клика:

Затем внутри функции scrollToTop мы заставим страницу прокручиваться в верхнюю часть экрана с помощью метода scrollTo.

Мы также можем немного изменить стиль кнопки:

Теперь мы можем разместить кнопку где-нибудь внизу страницы, например, в футере:

И получаем вот что:

Вариант 2: Определение положения прокрутки

Мы можем обнаружить прокрутку с помощью прослушивателя событий прокрутки.

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

scrollHeight дает высоту элемента, включая ту часть, которая не видна из-за переполнения.

clientHeight дает внутреннюю высоту элемента в пикселях, которая является высотой видимой части.

Если мы вычтем из scrollHeight clientHeight, мы получим общее количество пикселей, которые мы можем прокрутить:

Теперь у нас есть переменная scrollTotal, которая представляет максимальное количество пикселей, которые можно прокручивать по вертикали. Разделив количество прокручиваемых пикселей на общее количество пикселей, которые мы можем прокрутить, мы получим соотношение от 0 до 1. Играя с этим соотношением, мы можем легко включать и выключать кнопку.

Например, мы добавим условие, которое показывает кнопку прокрутки вверх, когда пользователь прокручивает вниз на 80% (или 0,80) от общей высоты страницы. 80% — произвольное число. По сути, чем ближе мы к 1, тем больше пользователь должен прокрутить, прежде чем увидит кнопку.

Вот код JavaScript:

Нам понадобится некоторый CSS для правильного позиционирования кнопки, когда она появится в поле зрения:

При этом кнопка появляется, когда пользователь опускается на 80% по странице, а затем скрывается, когда это значение превышено.

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

Есть еще один вариант…

Вариант 3: Intersection Observer

Intersection Observer API — отличное решение вышеуказанной проблемы. Это довольно новый API браузера, который позволяет разработчикам передать большинство этих задач браузеру более оптимизированным способом. Вот как это определяет MDN:

Intersection Observer API обеспечивает способ асинхронного наблюдения за изменениями пересечения целевого элемента с элементом-предком или с окном просмотра документа верхнего уровня.

Довольно аккуратно! Это означает, что кнопка может быть нашим целевым элементом:

Затем мы пишем функцию обратного вызова, которая что-то делает, когда наш элемент «пересекается» с окном просмотра — что является причудливым способом сказать, когда он появляется в поле зрения.

И как только футер входит в область просмотра или покидает ее, все, что нам действительно нужно — это добавить или удалить класс. Обратный вызов получает в качестве параметра массив записей.

Нам нужно создать новый экземпляр IntersectionObserver и передать ему только что написанную функцию обратного вызова.

Наконец, мы указываем наблюдателю начать наблюдение (э-э, отслеживание) целевого элемента, который был выбран выше, когда он пересекается с окном просмотра:

А что насчет плавной прокрутки?

Конечно возможно! Фактически, Крис показал нам, как это можно сделать с помощью CSS еще в 2019 году:

Здесь есть еще немного нюансов, например, улучшения доступности, о которых Крис также рассказывает в своем посте. Дело в том, что CSS приобретает новые возможности, которые могут выполнять то, для чего мы использовали JavaScript.

Вот и все! Мы начали с довольно простой идеи. Мы улучшили ее, отображая и скрывая кнопку в зависимости от положения прокрутки пользователя. Затем мы улучшили производительность, реализовав Intersection Observer API вместо отслеживания текущей позиции прокрутки. И, наконец, мы увидели, как можно использовать CSS для плавной прокрутки. Сложив все вместе мы получаем кнопку с прокруткой вверх, которую легко увидеть и использовать, не блокируя при этом другие элементы на странице.

Автор: Marcel Rojas

Источник: css-tricks.com

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии запрещены.