滚动丝般顺滑

themes/yilia/layout/_partial/aside.ejs

@@ -2,7 +2,7 @@
   <div class="mod-side-operation">
     <% if (theme.top){ %>
     <div class="jump-container" id="js-jump-container" style="display:none;">
-      <a href="javascript:void(0)" >
+      <a href="#top" >
         <i class="icon icon-chevron-up"></i>
       </a>
     </div>

themes/yilia/layout/layout.ejs

@@ -15,6 +15,7 @@
       </div>
     </div>
     <div class="mid-col" :class="{show: isShow,hide: isShow!==undefined && !isShow}">
+      <a name="top"></a>
       <%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %>
       <div id="wrapper" class="body-wrap" v-pre>
         <div class="menu-l">

themes/yilia/source-src/css/article-main.scss

@@ -17,7 +17,7 @@
 }
 
 .article {
-  margin: 30px;
+  margin: 0 30px 30px;
   position: relative;
   border-width: 1px;
   border-style: solid;

themes/yilia/source-src/css/grid.scss

@@ -20,7 +20,8 @@ html, body, #container {
 #container{
 	position:relative;
 	min-height:100%;
-	background: linear-gradient(200deg,#5aa5c6,#a4854b);
+  background: linear-gradient(200deg,#5aa5c6,#a4854b);
+  scroll-behavior: smooth;
 	-webkit-overflow-scrolling: touch;
 	overflow-scrolling: touch;
 	.anm-canvas {
@@ -32,6 +33,7 @@ html, body, #container {
 	}
 }
 .body-wrap{
+  padding-top: 30px;
   margin-bottom: 80px;
 }
 .mid-col {

themes/yilia/source-src/css/mobile.scss

@@ -1,4 +1,5 @@
 .body-wrap {
+  padding-top: 0;
   margin-bottom: 0;
 }
 .left-col {

themes/yilia/source-src/js/aside.js

@@ -1,46 +1,48 @@
 var backTop = function (domE, ctn, distance) {
-  if (!domE) return;
+  if (!domE) return
-  var timer = null;
+  var timer = null
-  var _onscroll = (ctn || window).onscroll,
+  var _onscroll = ctn.onscroll
-    _onclick = domE.onclick;
+  ctn.onscroll = throttle(function () { // 滚动到一定高度才显示"回到顶部"按钮
-  (ctn || window).onscroll = throttle(function () {
+    typeof _onscroll === 'function' && _onscroll.apply(this, arguments)
-    typeof _onscroll === 'function' && _onscroll.apply(this, arguments);
+    toggleDomE()
-    toggleDomE();
+  }, 100)
-  }, 100);
+  if(!window.getComputedStyle || window.getComputedStyle(ctn).scrollBehavior === undefined) {
-  domE.onclick = function () {
+    // 浏览器不支持scroll-behavior属性
-    typeof _onclick === 'function' && _onclick.apply(this, arguments);
+    domE.querySelector('a[href="#top"]').addEventListener('click', function (event) {
-    timer = setInterval(function () { //设置一个计时器
+      event.preventDefault()
-      var ct = ctn.scrollTop || document.documentElement.scrollTop || document.body.scrollTop; //获取距离顶部的距离
+      timer = setInterval(function () { //设置一个计时器
-      var diff = Math.max(10, ct / 6);
+        var ct = ctn.scrollTop || document.documentElement.scrollTop || document.body.scrollTop //获取距离顶部的距离
-      ct -= diff;
+        var diff = Math.max(10, ct / 6)
-      if (ct > 0) {//如果与顶部的距离大于零
+        ct -= diff
-        ctn.scrollTop = ctn.scrollTop - diff;
+        if (ct > 0) {//如果与顶部的距离大于零
-        window.scrollTo(0, ct);//向上移动10px
+          ctn.scrollTop = ctn.scrollTop - diff
-      } else {//如果距离小于等于零
+          window.scrollTo(0, ct)//向上移动10px
-        ctn.scrollTop = 0;
+        } else {//如果距离小于等于零
-        window.scrollTo(0, 0);//移动到顶部
+          ctn.scrollTop = 0
-        clearInterval(timer);//清除计时器
+          window.scrollTo(0, 0)//移动到顶部
-      }
+          clearInterval(timer)//清除计时器
-    }, 10);//隔10ms执行一次前面的function，展现一种平滑滑动效果
+        }
-  };
+      }, 13)//隔13ms执行一次前面的function，展现一种平滑滑动效果
+    })
+  }
 
   function toggleDomE() {
-    domE.style.display = (ctn.scrollTop || document.documentElement.scrollTop || document.body.scrollTop) > (distance || 500) ? 'block' : 'none';
+    domE.style.display = (ctn.scrollTop || document.documentElement.scrollTop || document.body.scrollTop) > distance  ? 'block' : 'none'
   }
   function throttle(func, wait) {
-    var timer = null;
+    var timer = null
     return function () {
-      var self = this, args = arguments;
+      var self = this, args = arguments
-      if (timer) clearTimeout(timer);
+      if (timer) clearTimeout(timer)
       timer = setTimeout(function () {
-        return typeof func === 'function' && func.apply(self, args);
+        return typeof func === 'function' && func.apply(self, args)
-      }, wait);
+      }, wait)
     }
   }
 };
 
 function init() {
-  backTop(document.getElementById('js-jump-container'), document.getElementById('container'));
+  backTop(document.getElementById('js-jump-container'), document.getElementById('container'), 300)
 }
 
 export default { init }