置顶

src/App.vue

@@ -1,7 +1,9 @@
 <template>
-  <RouterView />
+	<RouterView />
+	<BackTop />
 </template>
 
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+	import { RouterView } from "vue-router";
+	import BackTop from "./components/back-top.vue";
 </script>

src/components/back-top.vue

@@ -0,0 +1,92 @@
+<template>
+	<div
+		class="back-top"
+		@click="handleClick"
+		:class="{ active: progress > 0, hidden: progress === 0 }"
+	>
+		<svg width="100%" height="100%" viewBox="-1 -1 102 102">
+			<path
+				d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"
+				:style="{
+					transition: 'stroke-dashoffset 10ms linear',
+					strokeDasharray: `${progress}, ${max}`,
+					stroke: '#222',
+					strokeWidth: 4,
+				}"
+				fill="none"
+			></path>
+		</svg>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, onMounted, onUnmounted, h } from "vue";
+	const max = ref(98 * Math.PI);
+	const progress = ref(0);
+	const handleScroll = () => {
+		const el = document.documentElement;
+		const num = el.scrollTop / (el.scrollHeight - el.clientHeight);
+		progress.value = max.value * num;
+	};
+	const handleClick = () => {
+		document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
+	};
+	onMounted(() => {
+		handleScroll();
+		document.addEventListener("scroll", handleScroll);
+	});
+	onUnmounted(() => {
+		document.removeEventListener("scroll", handleScroll);
+	});
+</script>
+<style scoped>
+	.back-top {
+		position: fixed;
+		right: 30px;
+		bottom: 30px;
+		width: 46px;
+		height: 46px;
+		cursor: pointer;
+		color: #222;
+		background-color: #fff;
+		border-radius: 50%;
+		-webkit-box-shadow: inset 0 0 0 1px #e1e1e1;
+		box-shadow: inset 0 0 0 1px #e1e1e1;
+		z-index: 999;
+	}
+	.back-top svg {
+		width: 100%;
+		height: 100%;
+	}
+	.back-top path {
+		transition: stroke-dashoffset 10ms linear;
+	}
+	.back-top.active {
+		animation: active 0.2s linear both;
+	}
+	.back-top.hidden {
+		animation: hidden 0.2s linear both;
+	}
+	@keyframes active {
+		0% {
+			display: none;
+			opacity: 0;
+			transform: translateY(50px);
+		}
+		100% {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+	@keyframes hidden {
+		0% {
+			opacity: 1;
+			transform: translateY(0);
+		}
+		100% {
+			opacity: 0;
+			transform: translateY(50px);
+			display: none;
+		}
+	}
+</style>

src/pages/ContactView.vue

@@ -9,6 +9,106 @@
       route by Vite SSG.
     </p>
     <a href="/">Back home</a>
+	<div>1</div>
+	<div>2</div>
+	<div>3</div>
+	<div>4</div>
+	<div>5</div>
+	<div>6</div>
+	<div>7</div>
+	<div>8</div>
+	<div>9</div>
+	<div>10</div>
+	<div>11</div>
+	<div>12</div>
+	<div>13</div>
+	<div>14</div>
+	<div>15</div>
+	<div>16</div>
+	<div>17</div>
+	<div>18</div>
+	<div>19</div>
+	<div>20</div>
+	<div>21</div>
+	<div>22</div>
+	<div>23</div>
+	<div>24</div>
+	<div>25</div>
+	<div>26</div>
+	<div>27</div>
+	<div>28</div>
+	<div>29</div>
+	<div>30</div>
+	<div>31</div>
+	<div>32</div>
+	<div>33</div>
+	<div>34</div>
+	<div>35</div>
+	<div>36</div>
+	<div>37</div>
+	<div>38</div>
+	<div>39</div>
+	<div>40</div>
+	<div>41</div>
+	<div>42</div>
+	<div>43</div>
+	<div>44</div>
+	<div>45</div>
+	<div>46</div>
+	<div>47</div>
+	<div>48</div>
+	<div>49</div>
+	<div>50</div>
+	<div>51</div>
+	<div>52</div>
+	<div>53</div>
+	<div>54</div>
+	<div>55</div>
+	<div>56</div>
+	<div>57</div>
+	<div>58</div>
+	<div>59</div>
+	<div>60</div>
+	<div>61</div>
+	<div>62</div>
+	<div>63</div>
+	<div>64</div>
+	<div>65</div>
+	<div>66</div>
+	<div>67</div>
+	<div>68</div>
+	<div>69</div>
+	<div>70</div>
+	<div>71</div>
+	<div>72</div>
+	<div>73</div>
+	<div>74</div>
+	<div>75</div>
+	<div>76</div>
+	<div>77</div>
+	<div>78</div>
+	<div>79</div>
+	<div>80</div>
+	<div>81</div>
+	<div>82</div>
+	<div>83</div>
+	<div>84</div>
+	<div>85</div>
+	<div>86</div>
+	<div>87</div>
+	<div>88</div>
+	<div>89</div>
+	<div>90</div>
+	<div>91</div>
+	<div>92</div>
+	<div>93</div>
+	<div>94</div>
+	<div>95</div>
+	<div>96</div>
+	<div>97</div>
+	<div>98</div>
+	<div>99</div>
+	<div>100</div>
   </main>
 </template>