• 前端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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145

    返回顶部

    源码如下

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

    <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83

    效果如下

    请添加图片描述

    最后

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

  • 相关阅读:
    PDF转换成二维码
    4.四大组件的工作过程
    C++11标准模板（STL）- 算法（std::iter_swap）
    Codeforces Round #787 (Div. 3) F. Vlad and Unfinished Business
    Pytest用例自定义 - 重复、并行、串行
    图形验证码+短信验证码实战
    小公司如何成功申请企业邮箱
    c/c++/vs2020/函数与指针形参
    记录Manjaro Linux安装nvidia显卡驱动失败的经历
    我的创作纪念日
  • 原文地址：https://blog.csdn.net/m0_49714202/article/details/125442575