vue实现点击按钮滚动页面到指定位置

MrsTing

于 2021-04-12 17:39:03 发布

阅读量3.5k

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_40364610/article/details/115631123

版权

Vue 滚动定位 DOM操作动画效果自定义方法

关键词由优快云通过智能技术生成

本文介绍了一种在Vue应用中通过自定义`scrollToLocation`方法实现页面元素滚动到指定位置的方法。当点击按钮时，利用`$nextTick`确保DOM更新后获取目标元素距离页面顶部的位置，结合`utils/index.js`中的动画滚动函数，平滑地将页面滚动到目标div所在位置。该方法涉及Vue组件、DOM操作和页面滚动动画效果。

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

方法：将要滚动的指定位置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);
}