点击导航跳转到相应板块

点击导航跳转到相应板块

在vue3中实现

const tabs = reactive([
  { value: "section1", label: "招聘信息" },
  { value: "section2", label: "商务合作" },
]);
// 导航点击
const scrollToSection = (sectionId) => {
  const section = document.getElementById(sectionId);//根据id获取内容位置
  if (section) {
    const scrollTop = section.offsetTop - 120;//可以文档位置，减去导航栏高度
    window.scrollTo({ //平滑跳转到相应位置
      top: scrollTop,
      behavior: "smooth",
    });
  }
};

<div
   class="flex items-center cursor-pointer py-2 business-tabs-item"
   :class="{ 'business-active': modelValue === index }"
   v-for="(item, index) in tabs"
   :key="item.value"
   @click="changeTab(index), scrollToSection(item.value)"
 ></div>