[JavaScript知识库] vue项目实现回到顶部的两种超简单方法

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue项目实现回到顶部的两种超简单方法 -> 正文阅读

[JavaScript知识库]vue项目实现回到顶部的两种超简单方法

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

<template>
	<div id="topAnchor" ref="faultTree" class="wrap">
	    <a id="TOPUp" href="#topAnchor">
	      <img style="width: 100%;height: 100%;" src="../../../../assets/top.png" alt="">
	    </a>
	    <!--其他业务逻辑代码-->
	    ...
	</div>
</template>

样式：

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

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

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

<template>
  <div class="hello_world">
    <button class="top" @click="toTop">^</button>
  </div>
</template>

<script>
export default {
  methods: {
    toTop() {
      document.documentElement.scrollTop = 0;
    },
  },
};
</script>

<style>
.hello_world {
  height: 5000px;
}
.top {
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: 50px;
    right: 100px;
    background-color: aqua;
  }
</style>