Обложка канала

Frontender's notes

Годные заметки, новости, видео и интересные статьи для Frontend разработчиков.

Frontender's notes

4 года назад
Открыть в
React - реализация якорей Алоха товарищи фронты! Недавно передо мной встала вполне себе стандартная задача, реализовать якоря для того что бы пользователь закрывая одну вкладку с инфой автоматически передвигался ко второй. В этом посте я хотел бы показать вам как вообще можно сделать что-то вроде якоря в react. Суть проста: 1. Создаем ref объекта к которому мы хотим перейти. 2. В случае когда мы хотим перейти к этому объекту используем метод ref.current.scrollIntoView(); import React, { useRef } from 'react'; import { render } from 'react-dom'; import './style.css'; const ScrollDemo = () => { const myRef = useRef(null); const executeScroll = () => myRef.current.scrollIntoView(); return ( <> <div style={{ height: 600 }} /> <div ref={myRef}>Объект на который мы ссылаемся</div> <div style={{ height: 1500 }} /> <button onClick={executeScroll}>Перейти к объекту</button> </> ); }; В общем вот как то так. Как обычно удачи в экспериментах!