Окно «Окно» предоставляет несколько методов, которые позволяют нам программно прокрутить веб-страницу, например плавную прокрутку до определенных разделов или возвращать пользователю в верхнюю часть страницы.
Недавно я использовал это в проекте, чтобы создать кнопку «Возвращение к верху», которая появилась бы, когда пользователь начал прокручивать страницу, и при нажатии быстро вернет пользователя в верхнюю часть страницы.
Начиная
Для начала нам сначала необходимо зарегистрировать элемент, который мы хотим использовать в качестве цели для действия прокрутки. Для «возврата к началу» это может быть заголовка страницы или любой другой элемент в верхней части, которую вы выбираете. Чтобы зарегистрировать эти элементы с помощью реактивных крюков, нам нужно будет использовать УСЭРЕФ крючок для регистрации элемента.
Сначала создайте маркер:
const topRef = useRef(null);
Во-вторых, прикрепите его к желаемому элементу, используя его Ref атрибут:
Scroll To Top Example
Создание кнопки
Для самой кнопки мы можем создать новый компонент и назначить Scrolltoref Функция для его клики. Эта функция принимает, примет цель REF и использовать Scrollto () Функция на окно объект для прокрутки окна до вершины реф элемент виден. Чтобы сделать это действие гладким, вместо мгновенного прыжка, мы можем при желании передать свойство «поведение»:
const scrollToRef = (target) => {
window.scrollTo({
top: target.current.offsetTop,
behavior: "smooth"
});
}
Условно рендуринг кнопки
В моей реализации я хотел, чтобы кнопка только рендерировала только после того, как пользователь прокручивается заранее определенное расстояние по странице. Чтобы достичь этого, мы можем использовать Scrolly Собственность на окно Объект, чтобы определить, насколько далеко на странице пользователя прокручивается. С помощью прослушивателя событий на событии прокрутки для окна мы можем затем сравнить сосновую позицию окна при каждом прокрутке, чтобы определить, должен ли состояние кнопки «Show» должна быть правдой или ложным. В качестве альтернативы, мы могли бы сделать это сравнение при запуске прокрутки или кончено, чтобы улучшить производительность, но это изменило бы его поведение.
Поскольку кнопка будет установлена/размонтирована условно, важно удалить прослушиватель события прокрутки из объекта окна, когда кнопка отключается. Для этого мы можем вернуть функцию очистки, используя Useffect Крючок, который будет вызываться, когда компонент не установлен.
const GoToButton = ({ displayAfter, target }) => {
const [showButton, setShowButton] = useState(false);
const handleShowButton = () => {
if (!showButton && window.scrollY > displayAfter) {
setShowButton(true);
return;
}
if (!showButton && window.scrollY <= displayAfter) {
setShowButton(false);
return;
}
};
window.addEventListener("scroll", handleShowButton);
useEffect(() => {
return window.removeEventListener("scroll", handleShowButton);
});
const scrollToRef = (target) => {
window.scrollTo({
top: target.current.offsetTop,
behavior: "smooth"
});
};
if (showButton) {
return ;
} else {
return "";
}
};
export default GoToButton;
Вывод
Подобные подходы могут быть использованы для прокрутки страницы к разным разделам, используя меню содержимого и несколько разделов. Оконный объект также имеет Scrollby Метод, который можно использовать вместо прокрутки, если желаемое поведение было всегда прокручивать определенное расстояние, такое как использование window.scrollby (0, window.innerheight) прокрутить вниз на одну страницу.
Код для демонстрации этого прокрутки к верхней функции в анимации можно найти на этом CodeSandbox.
Ресурсы:
Оригинал: “https://dev.to/dsasse07/implementing-a-scroll-to-top-feature-in-react-4b5n”