方法:将要滚动的指定位置div最外层大盒子进行命名,如图:
在这里插入图片描述

<template>
	<el-tooltip class="item" effect="dark" content="图表" placement="right">
	  <el-button type="primary" size="mini" @click="handleToChart" plain>
	    <svg-icon icon-class="icon-chart" class="icon-svg svg-icon"></svg-icon>
	  </el-button>
	</el-tooltip>
</template>
<script>
	import { scrollToLocation } from '@/utils/index'
</script>

方法:

handleToChart() {
  this.$nextTick(() => {
    const domToTop = this.$refs.mechanismChart.getBoundingClientRect().top
    scrollToLocation(domToTop)
  })
}

在utils/index.js文件中,最关键代码,主要计算思路为:要滚动的距离为滚动条距离顶部的距离+指定位置的元素到页面顶部的距离,然后使用scrollTop进行滚动:

// 页面滑动到指定位置
export function scrollToLocation(toHeight) {
  const scrollToTop = document.documentElement.scrollTop   //滚动条距离顶部的距离
  $("html,body").animate({
    scrollTop: scrollToTop + toHeight
  }, 500);
}
Logo

前往低代码交流专区

更多推荐