vue2项目,主体有滚动区域,a-modal也有滚动区域,写出代码,实现点击浮动的按钮,回到a-modal的顶部
时间: 2023-12-30 15:03:41 浏览: 94
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
可以在a-modal中添加一个ref,在按钮的点击事件中使用$refs获取到a-modal的实例,然后通过其$refs属性获取到滚动区域的dom元素,最后使用scrollTop属性将其滚动到顶部即可。
示例代码如下:
```
<template>
<div>
<div class="scroll-wrap" ref="scrollWrap">
<!-- 主体滚动区域 -->
</div>
<a-modal ref="modal">
<div class="modal-scroll-wrap">
<!-- a-modal滚动区域 -->
</div>
</a-modal>
<button @click="backToTop">回到顶部</button>
</div>
</template>
<script>
export default {
methods: {
backToTop() {
const modal = this.$refs.modal
const modalScrollWrap = modal.$refs.bodyWrapper
modalScrollWrap.scrollTop = 0
}
}
}
</script>
```
其中,modal.$refs.bodyWrapper获取到的是a-modal内部滚动区域的dom元素。
阅读全文