vue3.0 实现屏幕回到到顶部按钮

前言

已经有可以实现的库了，直接用库

安装

npm i vue-gototop-button

使用

全局加载组件

// main.js
import { createApp } from 'vue'
import { gtbutton } from 'vue-gototop-button'
import App from './App.vue'
// ...
createApp(App).use(gtbutton).mount('#app')

或手动导入

<script setup>
import { GoTopBtn } from 'vue-gototop-button'
</script>

使用

<template>
    <GoTopBtn :top="20">
        <p>↑</p>
    </GoTopBtn>
</template>

参数

属性名	说明
top	当屏幕滚动小于该值时显示按钮

修改 css

在node_modules/vue-gototop-button/GoTopButton.css修改

默认值：

button{
    position: fixed;
    right: 50px;
    bottom: 50px;
}