How to create a dynamic, smooth-scrolling menu

#javascript #react #html #typescript

I am using react but is possible to use in all projects that use javascript how language.

To achieve this effect, you can implement a container div that splits the screen into sections with Id in each element:

//create a page

      <div className="container">
        <div className="content">
          <div id="Profile">
           <h1>Profile Content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
          </div>
          <div id="ExperiencesContainer">
            <h1>Experiences Content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
          </div>
          <div id="AboutMe">
            <h2>About me</h2>
            <h3>I work with what I love</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
          </div>
        </div>
      </div>

Our HTML Menu could be:

<div className="containerMenu">
                <button onClick={() => handleNavigateMenu('Profile')}>Profile</Tab>
                <button onClick={() => handleNavigateMenu('AboutMe')}>About me</Tab>
                <button onClick={() => handleNavigateMenu('Experiences')}>Experiences</Tab>
</div>

and this function from onClick:

//define this interface to use menu items without errors when call function handleNavigateMenu
export interface IMenuItems {
    items:
    | 'Profile'
    | 'Experiences'
    | 'AboutMe'
}

const handleNavigateMenu = (menuItems: IMenuItems['items']) => {

  const element = document.getElementById(menuItems) //created a element
  if(element) {
    element.scrollIntoView({ behavior: 'smooth' }) //scrolling to element
  }
}