基于图标来自 element ui ，js原生写法：
- <template>
- <div
- id="BackTop"
- @click="BackTop">
- <i class="el-icon-caret-top"/>
- </div>
- </template>
- <script>
- export default {
- methods: {
- BackTop() {
- this.smoothscroll()
- },
- // 回顶部
- smoothscroll() {
- const currentScroll =
- document.documentElement.scrollTop || document.body.scrollTop
- if (currentScroll > 0) {
- window.requestAnimationFrame(this.smoothscroll)
- window.scrollTo(0, currentScroll - currentScroll / 5)
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- #BackTop {
- background-color: #fff;
- position: fixed;
- right: 100px;
- bottom: 150px;
- width: 40px;
- height: 40px;
- border-radius: 20px;
- cursor: pointer;
- transition: 0.3s;
- box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
- z-index: 5;
- &:hover {
- transform: scale(1.2);
- }
- i {
- color: #409eff;
- display: block;
- line-height: 40px;
- text-align: center;
- font-size: 18px;
- }
- }
- </style>
博主厉害
博主厉害，学习了