scroll to top 优化

src/main/resources/static/css/base/base.h5.css

@@ -117,7 +117,11 @@
 .loginAlert .bd a.btn{display:block;width:55.2vw;height:11.6vw;line-height:11.6vw;text-align:center;color:#FFF;background:#E15621;border-radius:5.8vw;margin:5.4vw auto 4.2vw}
 .loginAlert .bd em.btn{font-style:normal;padding:0 5.4vw}
 
-
+#scrollTop{display:none;position:fixed;right:0;;z-index:9999;bottom:4vw;}
+#scrollTop .item{width:12vw;background-color:rgba(190,194,201,.3);box-sizing:border-box;text-align:center;margin-bottom:2.5vw;font-size:3vw;position:relative}
+#scrollTop .item>span{box-sizing:border-box;display:block;padding:1.5vw;line-height:3.4vw;}
+#scrollTop .item .toTop{width:100%;height:100%;}
+#scrollTop .item .toTop:before{display:block;margin:0 auto;width:5.8vw;height:5.8vw;background-position:21.5% 26%;}
 
 
 

src/main/resources/static/css/base/base.pc.css

@@ -193,12 +193,13 @@ body{min-width:1184px;}
 .loginAlert .bd a.btn{right:16px;color:#FFF;background:#E15621}
 .loginAlert .bd em.btn{font-style:normal;right:100px;color:#22272E;background:#FFF;border:1px solid #B8BFCA}
 
-
-
-
-
-
-
-
+/* 首页右侧导航 */
+#scrollTop{display:none;position:fixed;right:50%;margin-right:-700px;width:88px;z-index:9999;bottom:120px;}
+#scrollTop .item{width:100%;background-color:#fff;box-sizing:border-box;text-align:center;box-shadow:0 2px 4px rgb(254,246,243);border-radius:2px;margin-bottom:10px;font-size:12px;position:relative}
+#scrollTop .item span{display:block;width:100%;box-sizing:border-box}
+#scrollTop .item>span{position:relative;cursor:pointer;}
+#scrollTop .item>span:hover{color:#E15616;}
+#scrollTop .item .toTop{padding:12px 16px 12px 48px;line-height:16px;}
+#scrollTop .item .toTop:before{width:32px;height:32px;background-position:-42px -254px;position:absolute;top:4px;left:16px}
 
 

src/main/resources/static/js/base.js

@@ -91,8 +91,22 @@ $(function(){
         $('.loginAlert').hide();
         if(!isPC){looseBody();}
     });
-
-
+    // 置顶
+    $('#scrollTop').on("click", '.toTop',function () {
+        $("html,body").animate({scrollTop:0},500);
+    });
+        // 侧边栏滚动判断
+        $(window).scroll(function () {
+            if($('body').attr("style") && $('body').attr("style").indexOf('fixed')>0){
+                return false;
+            }
+            var scoll = Math.max($('html').scrollTop(), $('body').scrollTop());
+            if(scoll >200){
+                $('#scrollTop').show();
+            }else {
+                $('#scrollTop').hide();
+            }
+        });
 
 });
 // 公共方法

src/main/resources/static/js/index.js

@@ -203,6 +203,8 @@ var homeData = new Vue({
                 $('#advertising').hide();
             }
         });
+        // 移除公共置顶
+        $('#scrollTop').remove();
         // 置顶
         $('#sideNav').on("click", '.toTop',function () {
             $("html,body").animate({scrollTop:0},500);

src/main/resources/templates/components/footer.html

@@ -56,6 +56,11 @@
             </div>
         </div>
     </div>
+    <div id="scrollTop">
+        <div class="item">
+            <span class="toTop icon mIcon">置顶</span>
+        </div>
+    </div>
     <div class="loginAlert mFixed">
         <div class="box">
             <div class="hd">提示<em class="close"></em></div>