前端Vue返回顶部[功能]和底部四个角[样式](代源码和详图)

浏览器压缩前

压缩浏览器,就是左手按Ctrl 右手 滚动 滑轮 放大缩小浏览器, 然后看四个角的位置变化

如下图

浏览器屏幕分辨率为100%

浏览器压缩后

压缩浏览器,就是左手按Ctrl 右手 滚动 滑轮 放大缩小浏览器, 然后看四个角的位置变化

如下图

浏览器屏幕分辨率为50%

源码如下

<template>
  <div class="box">
    <div class="content">
      <!-- 返回底部 左上角 -->
      <div class="back_top_left" @click="toBottom">
        <img
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACxElEQVRoQ+2Yy27TUBCG/3FUQAJUNogFl0XFC4DyBiyiIrFA2BYsKFJjO1tA4vIIXKSq29pOVcoG2UYskKiy4A0ieAHUBS0LxIYKkIAqHuRUCXXi2PHlEBo5uxz7zJlv/jkzPodwwH90wP1HCTBpBUsFSgVyRqBMoZwBzD19ehQwm+48fJjMfCZ3WAQaIKJtSDCMurIRLNNXwLTcrf/d+V5cAghDV85OGcBBTyGBaSvU9PRUIaFhEmi8VGBUcC3LkX3GMhExge/ouuqJEEKIApbl3mZgiZm79vcgcFfXleWiIQoFCBy2LO8Rg+9HOUqgJ7ouPwyAigIpDGCl3Z6hd5tNBm7GOUfAc744V29Uq7tFQBQCsL7eOvrz185LZtT2O0VE34L/zHw8PI7WkcOz1xYWaj/yQuQGWF11Tu526A2YqwNOfpZImg/GfPY3mHEq5CxRe6bClxcX1S95IHIBNJveXMf3W8w4P+D8h4ok1ep1eTMYH/e9LCCZAWzbu5AmsklKaZr8/p8B2LZ7yWe8isrtE7OQVVX9HuWM4zjHvu7Ai9orEuGqpilv00KkVsC03etgfsaMQ6G0GbO6jKpWRPgNoluGprxIA5EKYLBB9RciPDU05cG49T3oF6btPgbj3kDVSt3wxgIocsH9DhcRkESAoiUfTA/L8m4w/LWsKRkLIGLTReV3XFFIangjAUSVvVEbNG1Z7tmJBBDZeOIqTJZ1hwCyRiJN6Yt7N63yIYCsDaoo53t20uy9PoBte1d89oMumalBFQ0RV/0kkmRNk18Ha/YBVkxnG8Dp8BdjugZVNMSo/gPgU8NQu1egfwEs5yMYe9d1Ao+AWSCHGh5hq6Gr50IAweUud9gCwZe651cxh/AsAMGc7iUBsASGRBXShy53sxqe9LzET4lJO5i0fgmQFCHRz0sFREc4yX6pQFKERD//AzsXrkCUZs0gAAAAAElFTkSuQmCC"
          alt="">
      </div>
      <!-- 返回底部 右上角  -->
      <div class="back_top_right" @click="toBottom">
        <img
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACxElEQVRoQ+2Yy27TUBCG/3FUQAJUNogFl0XFC4DyBiyiIrFA2BYsKFJjO1tA4vIIXKSq29pOVcoG2UYskKiy4A0ieAHUBS0LxIYKkIAqHuRUCXXi2PHlEBo5uxz7zJlv/jkzPodwwH90wP1HCTBpBUsFSgVyRqBMoZwBzD19ehQwm+48fJjMfCZ3WAQaIKJtSDCMurIRLNNXwLTcrf/d+V5cAghDV85OGcBBTyGBaSvU9PRUIaFhEmi8VGBUcC3LkX3GMhExge/ouuqJEEKIApbl3mZgiZm79vcgcFfXleWiIQoFCBy2LO8Rg+9HOUqgJ7ouPwyAigIpDGCl3Z6hd5tNBm7GOUfAc744V29Uq7tFQBQCsL7eOvrz185LZtT2O0VE34L/zHw8PI7WkcOz1xYWaj/yQuQGWF11Tu526A2YqwNOfpZImg/GfPY3mHEq5CxRe6bClxcX1S95IHIBNJveXMf3W8w4P+D8h4ok1ep1eTMYH/e9LCCZAWzbu5AmsklKaZr8/p8B2LZ7yWe8isrtE7OQVVX9HuWM4zjHvu7Ai9orEuGqpilv00KkVsC03etgfsaMQ6G0GbO6jKpWRPgNoluGprxIA5EKYLBB9RciPDU05cG49T3oF6btPgbj3kDVSt3wxgIocsH9DhcRkESAoiUfTA/L8m4w/LWsKRkLIGLTReV3XFFIangjAUSVvVEbNG1Z7tmJBBDZeOIqTJZ1hwCyRiJN6Yt7N63yIYCsDaoo53t20uy9PoBte1d89oMumalBFQ0RV/0kkmRNk18Ha/YBVkxnG8Dp8BdjugZVNMSo/gPgU8NQu1egfwEs5yMYe9d1Ao+AWSCHGh5hq6Gr50IAweUud9gCwZe651cxh/AsAMGc7iUBsASGRBXShy53sxqe9LzET4lJO5i0fgmQFCHRz0sFREc4yX6pQFKERD//AzsXrkCUZs0gAAAAAElFTkSuQmCC"
          alt="">
      </div>
      <div class="top">上面内容</div>
      <div class="bottom">下面内容</div>
      <!-- 返回顶部1 右下角-->
      <div class="back_bottom1" @click="toTop">
        <img
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACxElEQVRoQ+2Yy27TUBCG/3FUQAJUNogFl0XFC4DyBiyiIrFA2BYsKFJjO1tA4vIIXKSq29pOVcoG2UYskKiy4A0ieAHUBS0LxIYKkIAqHuRUCXXi2PHlEBo5uxz7zJlv/jkzPodwwH90wP1HCTBpBUsFSgVyRqBMoZwBzD19ehQwm+48fJjMfCZ3WAQaIKJtSDCMurIRLNNXwLTcrf/d+V5cAghDV85OGcBBTyGBaSvU9PRUIaFhEmi8VGBUcC3LkX3GMhExge/ouuqJEEKIApbl3mZgiZm79vcgcFfXleWiIQoFCBy2LO8Rg+9HOUqgJ7ouPwyAigIpDGCl3Z6hd5tNBm7GOUfAc744V29Uq7tFQBQCsL7eOvrz185LZtT2O0VE34L/zHw8PI7WkcOz1xYWaj/yQuQGWF11Tu526A2YqwNOfpZImg/GfPY3mHEq5CxRe6bClxcX1S95IHIBNJveXMf3W8w4P+D8h4ok1ep1eTMYH/e9LCCZAWzbu5AmsklKaZr8/p8B2LZ7yWe8isrtE7OQVVX9HuWM4zjHvu7Ai9orEuGqpilv00KkVsC03etgfsaMQ6G0GbO6jKpWRPgNoluGprxIA5EKYLBB9RciPDU05cG49T3oF6btPgbj3kDVSt3wxgIocsH9DhcRkESAoiUfTA/L8m4w/LWsKRkLIGLTReV3XFFIangjAUSVvVEbNG1Z7tmJBBDZeOIqTJZ1hwCyRiJN6Yt7N63yIYCsDaoo53t20uy9PoBte1d89oMumalBFQ0RV/0kkmRNk18Ha/YBVkxnG8Dp8BdjugZVNMSo/gPgU8NQu1egfwEs5yMYe9d1Ao+AWSCHGh5hq6Gr50IAweUud9gCwZe651cxh/AsAMGc7iUBsASGRBXShy53sxqe9LzET4lJO5i0fgmQFCHRz0sFREc4yX6pQFKERD//AzsXrkCUZs0gAAAAAElFTkSuQmCC"
          alt="">
      </div>
      <!-- 返回顶部2 右下角  个人感觉这个样式比较好用 -->
      <div class="back_bottom2" @click="toTop">
        <img
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACxElEQVRoQ+2Yy27TUBCG/3FUQAJUNogFl0XFC4DyBiyiIrFA2BYsKFJjO1tA4vIIXKSq29pOVcoG2UYskKiy4A0ieAHUBS0LxIYKkIAqHuRUCXXi2PHlEBo5uxz7zJlv/jkzPodwwH90wP1HCTBpBUsFSgVyRqBMoZwBzD19ehQwm+48fJjMfCZ3WAQaIKJtSDCMurIRLNNXwLTcrf/d+V5cAghDV85OGcBBTyGBaSvU9PRUIaFhEmi8VGBUcC3LkX3GMhExge/ouuqJEEKIApbl3mZgiZm79vcgcFfXleWiIQoFCBy2LO8Rg+9HOUqgJ7ouPwyAigIpDGCl3Z6hd5tNBm7GOUfAc744V29Uq7tFQBQCsL7eOvrz185LZtT2O0VE34L/zHw8PI7WkcOz1xYWaj/yQuQGWF11Tu526A2YqwNOfpZImg/GfPY3mHEq5CxRe6bClxcX1S95IHIBNJveXMf3W8w4P+D8h4ok1ep1eTMYH/e9LCCZAWzbu5AmsklKaZr8/p8B2LZ7yWe8isrtE7OQVVX9HuWM4zjHvu7Ai9orEuGqpilv00KkVsC03etgfsaMQ6G0GbO6jKpWRPgNoluGprxIA5EKYLBB9RciPDU05cG49T3oF6btPgbj3kDVSt3wxgIocsH9DhcRkESAoiUfTA/L8m4w/LWsKRkLIGLTReV3XFFIangjAUSVvVEbNG1Z7tmJBBDZeOIqTJZ1hwCyRiJN6Yt7N63yIYCsDaoo53t20uy9PoBte1d89oMumalBFQ0RV/0kkmRNk18Ha/YBVkxnG8Dp8BdjugZVNMSo/gPgU8NQu1egfwEs5yMYe9d1Ao+AWSCHGh5hq6Gr50IAweUud9gCwZe651cxh/AsAMGc7iUBsASGRBXShy53sxqe9LzET4lJO5i0fgmQFCHRz0sFREc4yX6pQFKERD//AzsXrkCUZs0gAAAAAElFTkSuQmCC"
          alt="">
      </div>
      <!-- 返回顶部 左下角-->
      <div class="back_bottom_left" @click="toTop">
        <img
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACxElEQVRoQ+2Yy27TUBCG/3FUQAJUNogFl0XFC4DyBiyiIrFA2BYsKFJjO1tA4vIIXKSq29pOVcoG2UYskKiy4A0ieAHUBS0LxIYKkIAqHuRUCXXi2PHlEBo5uxz7zJlv/jkzPodwwH90wP1HCTBpBUsFSgVyRqBMoZwBzD19ehQwm+48fJjMfCZ3WAQaIKJtSDCMurIRLNNXwLTcrf/d+V5cAghDV85OGcBBTyGBaSvU9PRUIaFhEmi8VGBUcC3LkX3GMhExge/ouuqJEEKIApbl3mZgiZm79vcgcFfXleWiIQoFCBy2LO8Rg+9HOUqgJ7ouPwyAigIpDGCl3Z6hd5tNBm7GOUfAc744V29Uq7tFQBQCsL7eOvrz185LZtT2O0VE34L/zHw8PI7WkcOz1xYWaj/yQuQGWF11Tu526A2YqwNOfpZImg/GfPY3mHEq5CxRe6bClxcX1S95IHIBNJveXMf3W8w4P+D8h4ok1ep1eTMYH/e9LCCZAWzbu5AmsklKaZr8/p8B2LZ7yWe8isrtE7OQVVX9HuWM4zjHvu7Ai9orEuGqpilv00KkVsC03etgfsaMQ6G0GbO6jKpWRPgNoluGprxIA5EKYLBB9RciPDU05cG49T3oF6btPgbj3kDVSt3wxgIocsH9DhcRkESAoiUfTA/L8m4w/LWsKRkLIGLTReV3XFFIangjAUSVvVEbNG1Z7tmJBBDZeOIqTJZ1hwCyRiJN6Yt7N63yIYCsDaoo53t20uy9PoBte1d89oMumalBFQ0RV/0kkmRNk18Ha/YBVkxnG8Dp8BdjugZVNMSo/gPgU8NQu1egfwEs5yMYe9d1Ao+AWSCHGh5hq6Gr50IAweUud9gCwZe651cxh/AsAMGc7iUBsASGRBXShy53sxqe9LzET4lJO5i0fgmQFCHRz0sFREc4yX6pQFKERD//AzsXrkCUZs0gAAAAAElFTkSuQmCC"
          alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    toBottom () {
      scrollTo(0, document.documentElement.scrollHeight);
    },
    toTop () {
      document.documentElement.scrollTop = 0;
    }
  }
}
</script>
<style scoped>
.box {
  min-width: 100%;
  max-height: 100%;
}
.content {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}
.top {
  width: 100%;
  height: 500px;
  border: 1px solid aqua;
}
.bottom {
  width: 100%;
  height: 500px;
  border: 1px solid aqua;
}
/* 左上角 样式固定 返回底部  */
.back_top_left {
  overflow: visible;
  position: absolute;
  z-index: 5;
  right: 50%;
  top: 100px;
  margin-right: 610px;
  transform: rotateX(180deg);
}

/* 右上角 样式固定 返回底部   */
.back_top_right {
  overflow: visible;
  position: absolute;
  z-index: 5;
  right: -70px;
  left: 50%;
  top: 38px;
  margin-left: 610px;
  transform: rotateX(180deg);
}

/* 右下角 返回顶部1 */
.back_bottom1 {
  position: fixed;
  right: 45px;
  bottom: 100px;
  width: 50px;
  height: 50px;
  z-index: 999;
  box-shadow: 0px 0px 4px 4px #ecefef;
  border-radius: 50px;
  cursor: pointer;
}
.back_bottom1 img {
  width: 100%;
  height: 100%;
}

/* 右下角 返回顶部2 */
.back_bottom2 {
  width: 50px;
  height: 50px;
  box-shadow: 0px 0px 4px 4px #ecefef;
  border-radius: 50px;
  /* 主要下面代码样式start */
  overflow: visible;
  position: absolute;
  z-index: 999;
  right: -70px;
  left: 50%;
  bottom: 100px;
  margin-left: 700px;
  cursor: pointer;
  /* end */
}
.back_bottom2 img {
  width: 100%;
  height: 100%;
}

/* 左下角 */
.back_bottom_left {
  overflow: visible;
  position: absolute;
  z-index: 5;
  right: 50%;
  bottom: 100px;
  margin-right: 610px;
}
</style>

返回顶部

源码如下

点击按钮平滑的滚动到顶部，可以设置延迟

<template>
  <div class="max">
    <div class="box">
      <div class="content1">内容1</div>
      <div class="content2">内容2</div>
      <div class="content3">内容3</div>
      <!-- <div class="toTop" v-show="gotop" @click="toTop"> -->
      <div class="toTop" @click="toTop">
        <img src="https://g.csdnimg.cn/side-toolbar/3.1/images/fanhuidingbucopy.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      gotop: false
    }
  },
  mounted () {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  handleScroll () {
    let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
    scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
  },
  methods: {
    toTop () {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果 
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  }
}
</script>
<style>
.max {
  width: 100%;
  height: 100%;
}
.box {
  width: 1200px;
  margin: 0 auto;
}
.content1 {
  width: 100%;
  height: 500px;
  background: lightblue;
}
.content2 {
  width: 100%;
  height: 500px;
  background: rgb(221, 187, 218);
}
.content3 {
  width: 100%;
  height: 500px;
  background: pink;
}

.toTop {
  width: 50px;
  position: fixed;
  bottom: 40px;
  left: 83%;
  right: 20px;
  z-index: 1000;
  border-radius: 50%;
  background: #000;
  -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 5%);
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 5%);
  background-color: #fff;
  text-align: center;
  cursor: pointer;
}
</style>

效果如下

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！