点击按钮滚动条滑动到某个位置

最新推荐文章于 2025-06-30 11:50:36 发布

原创最新推荐文章于 2025-06-30 11:50:36 发布 · 4.1k 阅读

7 ·

CC 4.0 BY-SA版权

只要思想不滑坡，方法总比困难多专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在Vue项目中，通过JavaScript方法实现点击不同按钮，使得页面滚动条自动滑动到预设的位置，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue界面：

<el-tabs v-model="active" @tab-click="jumpTitle">
  <el-tab-pane v-for="(item, index) in steps"
               :key="index" :label="item" :name="item"></el-tab-pane>
</el-tabs>（steps里是各个按钮的名字，只有一个按钮的话，可以传id或ref注册的名字到方法中）

<el-card ref="leftNewsDiv" @scroll.native="handleScroll" class="reviewLDCardStyle" :body-style="{ height:'92% ',}" >
  <p class="mianDFont"><img :src="imgurl" class="imgDStyle">1</p>
  <p class="mianDFont"><img :src="imgurl" class="imgDStyle">基本情况</p>
</el-card>

js方法

//根据按钮的不同，跳转到不同的位置

jumpTitle() {
  let nodeList = document.querySelectorAll('.mianDFont');
  let index = this.steps.indexOf(this.active);
  let element = nodeList[index];
  let material = this.$refs.leftNewsDiv.$el;（$el是挂载到实际dom上，没有$el则是虚拟dom）
  const scrollTop =element.offsetTop;
//父元素一定要有定位，定位可以是relative，或者resolution,会根据最近的有定位的父元素来计算，若没有定位，就是相对于body的位置
  material.scrollTo({
    top: scrollTop,
    behavior: 'smooth' // 平滑滚动
  });

},

//根据滚动事件，改变tab选中的名字
handleScroll() {
  let nodeList = document.querySelectorAll('.mianDFont');
  nodeList.forEach((item, index) => {
    //获取滚动的高度，加上标题的高度（方便能正好定位到标题）
    let scrollTop = this.$refs.leftNewsDiv.$el.scrollTop;
    if (scrollTop >= item.offsetTop) {
      this.active = this.steps[index];
    }
  })
}