2021-05-09 17:19:25

RaymondZZQ · May 9, 2021 · 619124b · 619124b
1 parent 0442e03
commit 619124b
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 0 deletions.
diff --git a/asset/back-to-top.css b/asset/back-to-top.css
@@ -0,0 +1,19 @@
+#scroll-btn {
+    position: fixed;
+    right: 15px;
+    bottom: 10px;
+    width: 35px;
+    height: 35px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-image: url(up.svg);
+	background-position-y: -1px;
+	display: none;
+	border: 2px solid;
+	border-radius: 4px;	
+}
diff --git a/asset/back-to-top.js b/asset/back-to-top.js
@@ -0,0 +1,20 @@
+document.addEventListener('DOMContentLoaded', function() {
+	var scrollBtn = document.createElement('div')
+	scrollBtn.id = 'scroll-btn'
+	document.body.append(scrollBtn)
+
+	window.addEventListener('scroll', function() {
+		var offset = window.document.documentElement.scrollTop;
+        scrollBtn.style.display = offset >= 500 ? "block" : "none";
+	})
+	scrollBtn.addEventListener('click', function(e) {
+		e.stopPropagation();
+		var step = window.scrollY / 15;
+		var hdl = setInterval(function() {
+			window.scrollTo(0, window.scrollY - step);
+			if(window.scrollY <= 0) {
+				clearInterval(hdl)
+			}
+		}, 15)
+	})
+})
diff --git a/asset/up.svg b/asset/up.svg
diff --git a/index.html b/index.html
@@ -22,6 +22,8 @@
   <script src="asset/share.js"></script>
   <link rel="stylesheet" href="asset/edit.css">
   <script src="asset/edit.js"></script>
+  <link rel="stylesheet" href="asset/back-to-top.css">
+  <script src="asset/back-to-top.js"></script>
 </head>
 <body>
   <div id="app">now loading...</div>