vue项目实现回到顶部的两种超简单方法

2024-06-29 20:03| 来源: 网络整理| 查看: 265

vue 中实现回到顶部的两种方式：（1）锚点方式通过点击锚点回到指定位置：

...

样式：

#TOPUp{ position: fixed; right: 45px; bottom: 100px; width: 40px; height: 40px; z-index: 99999999; box-shadow: 0px 0px 4px 4px #ecefef; border-radius: 600px; }

实现效果：在这里插入图片描述（2）scrollTop

通过点击事件将scrollTop重置为0，从而达到返回顶部的效果。

^ export default { methods: { toTop() { document.documentElement.scrollTop = 0; }, }, }; .hello_world { height: 5000px; } .top { position: fixed; width: 30px; height: 30px; bottom: 50px; right: 100px; background-color: aqua; }

代码资源链接代码地址

【本文地址】

公司简介

联系我们