vue锚点链接

<el-tabs v-model="sName" @tab-click="handleTabClick">
      <el-tab-pane label="公告正文" :name="1">el-tab-pane>
      <el-tab-pane label="串标公告" :name="2">el-tab-pane>
el-tabs>
 
//跳转区
<div id="announcement"> div>
<div id="tenderAnnouncement">div>

const handleTabClick = (tab) => {
    if (tab.props.name == 1) {
        // 定位到 "公告正文" 锚点
        scrollToAnchor("announcement");
    } else if (tab.props.name == 2) {
        // 定位到 "串标公告" 锚点
        scrollToAnchor("tenderAnnouncement");
    }
};
const scrollToAnchor = (anchorId) => {
    const element = document.getElementById(anchorId);
    if (element) {
        element.scrollIntoView({ behavior: "smooth" });
    }
};

scrollIntoView：

scrollIntoViewOptions 可选  一个包含下列属性的对象：

1. behavior：用于指定滚动的行为，默认值为"auto"。可以设置为"auto"、"smooth"或者"instant"。其中，"auto"表示浏览器自动选择滚动方式，"smooth"表示平滑滚动，"instant"表示瞬间滚动。

2. block：用于指定滚动的垂直方向，默认值为"start"。可以设置为"start"、"center"、"end"或者"nearest"。其中，"start"表示将元素的顶部与可见区域的顶部对齐，"center"表示将元素的中部与可见区域的中部对齐，"end"表示将元素的底部与可见区域的底部对齐，"nearest"表示将元素滚动到可见区域内，如果元素已经在可见区域内，则不进行滚动。

3. inline：用于指定滚动的水平方向，默认值为"nearest"。可以设置为"start"、"center"、"end"或者"nearest"。其中，"start"表示将元素的左边与可见区域的左边对齐，"center"表示将元素的中部与可见区域的中部对齐，"end"表示将元素的右边与可见区域的右边对齐，"nearest"表示将元素滚动到可见区域内，如果元素已经在可见区域内，则不进行滚动。