Как прокручивать страницу до элемента при переходе? (React)

Использую React-router-dom.

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

Как можно решить данную задачу?


Ответы (1 шт):

Автор решения: Денис Беспалов

Нашел решение:

this.myRef = React.createRef(); //Создаём реф

Далее присваиваем реф нужному элементу

<div ref={this.myRef}>Элемент</div>

Создаём функцию прокрутки

this.scrollToMyRef = () => {window.scrollTo(0, this.myRef.current.scrollHeight)

Вызваем через setTimeout

setTimeout(this.scrollToMyRef, 1000);

Вызывать надо именно через setTimout, что бы прокрутка вызвалась только когда все элементы страницы загрузились и было куда скролить.

→ Ссылка