scroll animation with html # tags

Question

I currently am trying to code a website to animate moving across the x-axis to access different sections of the page (page content in 'tab-content'). I have a navbar that has different headers, this is fixed, I want the user to click on each header and be taken to that section. I managed to take the user to the desired section/div with some JS code however, there isn't any animation it defaults to the selected section/div just suddenly being on screen. How do I animate with pure JS or CSS. I need the clicking of the header to move (motion) the user to that div. I'm new to web dev.

here some of my code

HTML

<div class="main-info">
      <div class="nav-container">
         <div class="nav-bar">
            <ul>
               <li data-tab-target="#show" class="tab"><a href="#show">Show</a></li>
               <li data-tab-target="#about" class="tab"><a href="#about">About</a></li>
               <li data-tab-target="#lookbook" class="tab"><a href="#lookbook">Lookbook</a></li>
               <li data-tab-target="#process" class="tab"><a href="#process">Process</a></li>
            </ul>
         </div>
         <div class="info overlay">
            <div class="text">
               <a href="#">MA</a>
               <a href="#">Coming Soon</a>
               <a href="#">BA</a>
            </div>
            <a href="index.html" class="info-back">Back</a>
         </div>
      </div>
      <div class="tab-content">
         <div id="show" data-tab-content class="active">
            <p>VIDEO</p>
         </div>
         <div id="about" data-tab-content>
            <p>About</p>
         </div>
         <div id="lookbook" data-tab-content>
            <p>Lookbook</p>
         </div>
         <div id="process" data-tab-content>
            <p>Process</p>
         </div>
      </div>
   </div>

CSS

.main-info {
   background-color: transparent;
   height: 100vh;
   overflow: hidden;
}

.nav-container {
   position: fixed;

}

.nav-bar {
   width: 80vw;
   height: 10vh;
   left: 10vw;
   position: absolute;
   top: 5vh;

}

.nav-bar ul {

   text-transform: uppercase;
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: space-around;
}

.tab a {
   font-family: Helvetica, sans-serif;
   font-weight: bold;
   font-size: 1rem;
   color: black;
   text-decoration: none;
}

.tab:hover {
   cursor: pointer;
   opacity: 0.6;
}

.tab.active {
   background-color: whitesmoke;
}



.info {
   width: 90vw;
   height: 10vh;
   /* border: 1px solid red; */
   left: 5vw;
   position: absolute;
   top: 80vh;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
}

.info a {
   font-family: Helvetica, sans-serif;
   font-weight: bold;
   font-size: 1.1rem;
   color: black;
   text-decoration: none;
   border: 1px solid teal;
}

.text {

   width: 30%;
   display: flex;
   justify-content: space-between;
}

.tab-content {
   border: 1px solid teal;
   position: absolute;
   left: 0;
   top: 0;
   height: 100vh;
   z-index: -11;
   display: flex;
   flex: row nowrap;
   justify-content: flex-start;


}


[data-tab-content] {
   border: 1px solid blueviolet;
   background-color: violet;
   font-size: 3rem;
   color: blue;
   scroll-behavior: smooth;
   display: none;
width: 100vw;
   height: 100vh;

}

.active[data-tab-content] {
   display: block;
}

JS

const tabs = document.querySelectorAll('[data-tab-target]');
const tabContents = document.querySelectorAll('[data-tab-content]')
// loop through the list to find the one tab mouse clicked
tabs.forEach(tab => {
   tab.addEventListener('click', () => {
      const target = document.querySelector(tab.dataset.tabTarget)

      tabContents.forEach(tabContent => {
         tabContent.classList.remove('active')
      })
      tabs.forEach(tab => {
         tab.classList.remove('active')
      });
      tab.classList.add('active')
      target.classList.add('active');

      
   });
});

Answer 1

You almost got it. Instead of setting the scroll-behavior on the elements that are inside a scrollable element, put it on either the element that has a scrollbar.

.tab-content {
  scroll-behavior: smooth;
}

Or on the top most element to have all elements move with a smooth scrolling animation.

:root {
  scroll-behavior: smooth;
}