基于图标来自 element ui ，js原生写法：
1. <template>
2. <div
3. id="BackTop"
4. @click="BackTop">
5. <i class="el-icon-caret-top"/>
6. </div>
7. </template>
8.
9. <script>
10. export default {
11. methods: {
12. BackTop() {
13. this.smoothscroll()
14. },
15. // 回顶部
16. smoothscroll() {
17. const currentScroll =
18. document.documentElement.scrollTop || document.body.scrollTop
19. if (currentScroll > 0) {
20. window.requestAnimationFrame(this.smoothscroll)
21. window.scrollTo(0, currentScroll - currentScroll / 5)
22. }
23. }
24. }
25. }
26. </script>
27.
28.
29. <style lang="scss" scoped>
30. #BackTop {
31. background-color: #fff;
32. position: fixed;
33. right: 100px;
34. bottom: 150px;
35. width: 40px;
36. height: 40px;
37. border-radius: 20px;
38. cursor: pointer;
39. transition: 0.3s;
40. box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
41. z-index: 5;
42. &:hover {
43. transform: scale(1.2);
44. }
45. i {
46. color: #409eff;
47. display: block;
48. line-height: 40px;
49. text-align: center;
50. font-size: 18px;
51. }
52. }
53. </style>