vue项目 在一个使用v-html属性的a-form-model标签中 实现点击浮动按钮回到顶部的功能
时间: 2024-02-09 12:11:21 浏览: 109
要实现点击浮动按钮回到页面顶部的功能,可以使用 Vue.js 提供的 `scrollTo` 方法。
首先需要在模板中添加一个浮动按钮,例如:
```html
<template>
<a-form-model>
<!-- 省略其他表单项 -->
<div class="back-to-top" @click="scrollToTop">
<i class="iconfont icon-arrow-up"></i>
</div>
</a-form-model>
</template>
```
然后在 Vue 实例中定义一个 `scrollToTop` 方法,当按钮被点击时调用该方法:
```js
export default {
methods: {
scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
})
}
}
}
```
在 `scrollTo` 方法中,将 `top` 设置为 0 可以让页面滚动到顶部,同时使用 `behavior: 'smooth'` 可以实现平滑滚动的效果。这样点击浮动按钮就可以回到页面顶部了。注意,为了在页面滚动时显示浮动按钮,还需要对样式进行调整。例如:
```css
.back-to-top {
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 24px;
color: #fff;
background-color: #1890ff;
border-radius: 50%;
cursor: pointer;
z-index: 999;
}
```
阅读全文