updated 样式调整

index.html

@@ -137,6 +137,7 @@
                         </div>
                     </div>
                 </div>
+                <script type="text/javascript" src="https://passer-by.com/public/script/projects.js"></script>
                 <div class="mod-foot">
                     <div class="inner">
                         <div class="bd">
@@ -144,6 +145,11 @@
                         </div>
                     </div>
                 </div>
+                <div class="mod-fixedbar">
+                    <div class="bd">
+                        <a href="javascript:;"><img src="static/image/gotop.png" width="24" height="24"></a>
+                    </div>
+                </div>
             </div>
         </div>
         <script type="text/javascript" src="https://jquerywidget.com/public/script/jquery.min.js"></script>
@@ -313,13 +319,29 @@
                         });
                     });
                 });
+            })();
 
-
+            // 底部滚动
-
+            (function () {
+                let timer = null;
+                let $gotop = document.querySelector('.mod-fixedbar a');
+                $gotop.addEventListener('click', function () {
+                    cancelAnimationFrame(timer);
+                    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+                    let move = scrollTop / 18;
+                    timer = requestAnimationFrame(function fn() {
+                        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
+                        if (oTop > 0) {
+                            document.body.scrollTop = document.documentElement.scrollTop = oTop - move;
+                            timer = requestAnimationFrame(fn);
+                        } else {
+                            cancelAnimationFrame(timer);
+                        }
+                    });
+                });
             })();
         </script>
         <script async defer src="https://cdn.bootcdn.net/ajax/libs/github-buttons/2.21.1/buttons.min.js"></script>
-		<script type="text/javascript" src="https://passer-by.com/public/script/projects.js"></script>
         <script type="text/javascript" src="https://passer-by.com/public/script/stat.js"></script>
     </body>
 </html>

static/style/index.css

@@ -500,6 +500,40 @@ a:hover{
     line-height: 30px;
 }
 
+
+.mod-fixedbar .bd {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    z-index: 99;
+}
+.mod-fixedbar .bd a{
+    position: relative;
+    display: block;
+    width: 48px;
+    height: 48px;
+    margin-bottom: 2px;
+    background: rgba(255,255,255,0.8);
+    border: 1px solid #f0f0f0;
+    line-height: 48px;
+    text-align: center;
+}
+.mod-fixedbar .bd .popup{
+    display: none;
+    position: absolute;
+    right: 50px;
+    bottom: 0;
+    z-index: 99;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 0 2px 0 rgba(0,0,0,0.05);
+}
+.mod-fixedbar .bd a:hover{
+    background: rgba(255,255,255,0.9);
+}
+.mod-fixedbar .bd a:hover .popup{
+    display: block;
+}
+
 @media screen and (max-width: 1020px) {
     .header{
         margin-bottom: 10px;
@@ -577,4 +611,14 @@ a:hover{
     .mod-panel .bd .btn{
         min-width: 64px;
     }
+
+    .mod-fixedbar .bd {
+        right: 10px;
+        bottom: 10px;
+    }
+    .mod-fixedbar .bd a{
+        width: 36px;
+        height: 36px;
+        line-height: 36px;
+    }
 }