Javascript 使用html#标记滚动动画

我目前正在尝试编写一个网站的代码，以动画形式在x轴上移动，从而访问页面的不同部分（“选项卡内容”中的页面内容）。我有一个导航栏，有不同的标题，这是固定的，我希望用户点击每个标题，并被带到该部分。我用一些JS代码设法将用户带到所需的部分/div，但是，没有任何动画，它默认为所选的部分/div，只是突然出现在屏幕上。如何使用纯JS或CSS制作动画。我需要点击标题来移动（移动）用户到该分区。我是web开发新手

这里是我的一些代码

HTML

JS

---

你差点就成功了。不要在可滚动元素中的元素上设置

滚动行为

，而是将其放在具有滚动条的元素上

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

或者在最上面的元素上，使所有元素以平滑滚动动画移动

:root {
  scroll-behavior: smooth;
}

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');

      
   });
});

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

:root {
  scroll-behavior: smooth;
}