2021-05-09 17:22:23

2a834118 · wizardforcel · 1dd3a038 · 2a834118 · 2a834118 · 2a834118
隐藏空白更改
内联并排

Showing with 51 addition and 0 deletion

asset/back-to-top.css asset/back-to-top.css +19 -0

asset/back-to-top.js asset/back-to-top.js +20 -0

asset/up.svg asset/up.svg +10 -0

index.html index.html +2 -0

未找到文件。
--- a/asset/back-to-top.css
+++ b/asset/back-to-top.css
+#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;	
+}
\ No newline at end of file
--- a/asset/back-to-top.js
+++ b/asset/back-to-top.js
+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)
+	})
+})
\ No newline at end of file
--- a/asset/up.svg
+++ b/asset/up.svg
+<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
+<svg viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="si-glyph si-glyph-arrow-thick-up">
+    <!-- Generator: Sketch 3.0.3 (7891) - http://www.bohemiancoding.com/sketch -->
+    <title>1211</title>
+    
+    <defs></defs>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M8.65,1.158 L3.165,7.098 C2.954,7.332 2.956,7.712 3.167,7.947 L7.035,7.952 L7.035,15.976 C7.035,16.529 7.474,16.976 8.017,16.976 L9.982,16.976 C10.525,16.976 10.964,16.529 10.964,15.976 L10.964,7.956 L14.775,7.961 C14.984,7.73 14.982,7.349 14.771,7.113 L9.414,1.159 C9.201,0.927 8.861,0.925 8.65,1.158 L8.65,1.158 Z" fill="#434343" class="si-glyph-fill"></path>
+    </g>
+</svg>
\ No newline at end of file
--- 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>