How to scroll to a specific block?

Question

JavaScript

I can't figure out how to make it scroll to a specific element on the page.

I dug into the code, wrote another helper for scrolling to the map. He works. I redid the height of the slider on the page, that is, on the page there is a header-> slider-> the block I need-> some other information-> map,
I thought because the slider is 70vh high and after it you can see the block I need , so my helper doesn't scroll.
Then I fixed the slider, set the height to full screen - the problem remained, the helper does not scroll to the block I need.
But I want to note that the second helper is fully functional and scrolls from the header to the map, so what's my problem?

Main page code:

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

Helper code:

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

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