vue实现点击按钮滚动页面到指定位置
方法:将要滚动的指定位置div最外层大盒子进行命名,如图:<template><el-tooltip class="item" effect="dark" content="图表" placement="right"><el-button type="primary" size="mini" @click="handleToChart" plain><sv
·
方法:将要滚动的指定位置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);
}
更多推荐
已为社区贡献6条内容
所有评论(0)