Как сделать прокрутку к определенному блоку?

Question

[Atay Kalykov]

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

Покопался в коде, написал еще один хелпер для скролла к карте. Он работает. Переделал высоту слайдера на странице, то есть на страничке идут хедер->слайдер-> нужный мне блок->еще какая-то информация->карта,
я думал из-за того, что слайдер высотою в 70vh и после него видно нужный мне блок, поэтому мой хелпер не скроллит.
Далее исправил слайдер, поставил высоту на весь экран - проблема осталась, хелпер не скроллит к нужному мне блоку.
Но хочу отметить то, что второй хелпер полностью работоспособен и листает с хедера к карте, так в чем же моя проблема?

Код основной странички:

import React from 'react';
import styles from './styles.module.scss'
import logo from '../../assets/icons/headerLogo.svg'
import locationIcon from '../../assets/icons/locationIcon.svg'
import { Link, useParams } from 'react-router-dom';
import { clickToAboutUsBlock, clickToMapBlock } from '../../utils/helpers'
import { useEffect } from 'react'



function Header() {
    const { component } = useParams()

    useEffect(() => {
        if (component === 'aboutUsBlock') {
            clickToAboutUsBlock()
        }else if(component === 'mapBlock') {
            clickToMapBlock()
        }
    }, [])

console.log(component)
    return (
        <div className={styles.container}>
            <header className={styles.header}>
                <Link to="/">
                    <div className={styles.logo}>
                        <img src={logo} alt="header logo" />
                        <p className={styles.title}>nomad<br />mining</p>
                    </div> 
                </Link>
                <div className={styles.navigation}>
                    <a onclick={clickToAboutUsBlock} className={styles.navigationLink}>о нас</a>
                    <Link to="/security" className={styles.navigationLink}>безопасность</Link>
                    <Link className={styles.navigationLink}>окружающая <br />среда</Link>
                    <Link className={styles.navigationLink}>местные <br />сообщества</Link>
                    <Link className={styles.navigationLink}>публикации</Link>
                    <Link to="/socialResponsibility" className={styles.navigationLink}>социальная <br />ответственность</Link>
                    <div className={styles.location}>
                        <img src={locationIcon} alt="" />
                        <a onClick={clickToMapBlock} className={styles.navigationLink}>наш офис</a>
                    </div>
                </div>
            </header>
        </div>
    )
}

export default Header

Код хелпера:

export function clickToAboutUsBlock() {
    let element = document.getElementById("aboutUsBlock");
    window.scrollTo({ top: element.offsetTop, behavior: "smooth" });
}
export function clickToMapBlock() {
    let element = document.getElementById("mapBlock");
    window.scrollTo({ top: element.offsetTop, behavior: "smooth" });
}

Answer 1

[Alexandroppolus]

useEffect(() => {
    if (component === 'aboutCompany') {
            clickToAboutCompanyBlock()
    }
}, [component])