test-pr#91

css/common.css

@@ -0,0 +1,38 @@
+.copyright {
+   text-align: right;
+}
+
+#toTop {
+    display: none;
+    position: fixed;
+    bottom:10px;
+    right:0;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background-color: #ced4ce;
+    cursor: pointer;
+    text-align: center;
+}
+
+#upArrow {
+    position: absolute;
+    left: 24%;
+    right: 0;
+    bottom: 19%;
+    transition:  .3s ease-in-out;
+    display:block;
+}
+
+#upText {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    bottom: 5px;
+    font-size: 12px;
+    line-height: 16px;
+    display: none;
+    transition: .3s ease-in-out;
+    -webkit-box-align: center;
+    
+}

src/main/resources/template/js/common.js

@@ -0,0 +1,25 @@
+$(function (){
+    var scroolTop = $(window).scroll(function () {
+        //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
+        console.log($(window).scrollTop())
+        if ($(window).scrollTop() > 100) {
+            $("#toTop").fadeIn(1500);
+            $("#toTop").hover(function() {
+                $("#upArrow").hide();
+                $("#upText").show();
+            }, function () {
+                $("#upArrow").show();
+                $("#upText").hide();
+            })
+        } else {
+            $("#toTop").fadeOut(1500)
+        }
+        
+    });
+
+    // 当点击跳转链接后，回到页面顶部位置
+    $("#toTop").click(function () {
+        $("body, html").animate({scrollTop:0}, 1000);
+        return false
+    })
+})()