2021-05-09 17:19:25

This commit is contained in:
wizardforcel
2021-05-09 17:19:25 +08:00
parent 0442e03108
commit 619124bf10
4 changed files with 51 additions and 0 deletions

19
asset/back-to-top.css Normal file
View File

@@ -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;
}

20
asset/back-to-top.js Normal file
View File

@@ -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)
})
})

10
asset/up.svg Normal file
View File

@@ -0,0 +1,10 @@
<!--?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>

After

Width:  |  Height:  |  Size: 814 B

View File

@@ -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>