Jump to section works on second click

Question

in Navbar I have on "Skills Section" an onClick event. When I click on "Skills", onClick works, but it stops the page from jumping to section.

TSX Navbar:

const [skillsClicked, setSkillsClicked] = useState<boolean>(false);
    
    const handleClickSkills = () =>{
        setSkillsClicked(!skillsClicked);
    }
    <a href="#skills" >
        <li onClick={handleClickSkills}>Skills</li>
    </a>

TSX Skills:

const {skillsClicked, handleClickSkills} = useGlobalContext();

return (
        <section>
            <div>
                <ul id='skills'></ul>
                    
            </div>
        </section>
    )

I want when I click on "Skills", the onClick event to change the state and in the same time to jump on the section based on the ID. (Separately they both work fine)

have you tried [this](https://stackoverflow.com/questions/43441856/how-to-scroll-to-an-element)? — Kaneki21, Feb 12 '23 at 12:57

score 0 · Answer 1 · answered Feb 12 '23 at 13:40

try this:

const [skillsClicked, setSkillsClicked] = useState<boolean>(false);

const handleClickSkills = () =>{
    setSkillsClicked(!skillsClicked);
    document.getElementById("skills").scrollIntoView({
        behavior : "smooth"
    })
}

// some code in between

<div onClick={handleClickSkills}>
    <li>Skills</li>
</div>

// or:
<li onClick={handleClickSkills}>
    Skills
</li>

Jump to section works on second click

1 Answers1