<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
可选 一个包含下列属性的对象:
behavior:用于指定滚动的行为,默认值为"auto"。可以设置为"auto"、"smooth"或者"instant"。其中,"auto"表示浏览器自动选择滚动方式,"smooth"表示平滑滚动,"instant"表示瞬间滚动。
block:用于指定滚动的垂直方向,默认值为"start"。可以设置为"start"、"center"、"end"或者"nearest"。其中,"start"表示将元素的顶部与可见区域的顶部对齐,"center"表示将元素的中部与可见区域的中部对齐,"end"表示将元素的底部与可见区域的底部对齐,"nearest"表示将元素滚动到可见区域内,如果元素已经在可见区域内,则不进行滚动。
inline:用于指定滚动的水平方向,默认值为"nearest"。可以设置为"start"、"center"、"end"或者"nearest"。其中,"start"表示将元素的左边与可见区域的左边对齐,"center"表示将元素的中部与可见区域的中部对齐,"end"表示将元素的右边与可见区域的右边对齐,"nearest"表示将元素滚动到可见区域内,如果元素已经在可见区域内,则不进行滚动。