vue 锚点定位和置顶

标签：index vue tabsId 锚点 document 置顶

锚点定位
// vue中使用
// 标题
<div
   class="tabs"
   v-for="(item, index) in titAll"
   :key="index"
   :class="{ actives: isactive === index }"
   @click="tabsColor(index)"
>
     {{ item }}
</div>
// 分类tit
<div>
  <div class="item" id="tabs0">资产账户</div>
  // <div>分类内容</div>
  <div class="item" id="tabs1">信贷服务</div>
  // <div>分类内容</div>
  <div class="item" id="tabs2">金融服务</div>
  // <div>分类内容</div>
</div>
 data() {
   return {
     titAll: ["资产账户", "信贷金融", "经融服务"],
     //初始选中
     isactive: 0,
   };
 },
 methods: {
  tabsColor(index) {
    // 切换选中样式
    this.isactive = index;
    // 获取对应iddom
    const tabsId = document.querySelector(`#tabs${index}`);
    // 判断进行平滑滚动
    if (tabsId) {
      window.scrollTo({
        top: tabsId.offsetTop,
        behavior: "smooth",
      });
    }
  },
},

置顶

<!-- 回到顶部 -->           <div class="go-top" @click="toYpWebsite()">             <img src="@/assets/index/top.png" alt="">             置顶           </div> //置顶     toYpWebsite() {       // this.$router.push('/ypWebsite')       document.body.scrollTop = document.documentElement.scrollTop = 0     },  

 

标签：index,vue,tabsId,锚点,document,置顶
From： https://www.cnblogs.com/Byme/p/17119018.html