From c30aed06c7c5237d3a6603b2cf777708d55d111f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BB=93=E5=8F=91=E5=8F=97=E9=95=BF=E7=94=9F?= Date: Sun, 26 May 2019 20:00:40 +0800 Subject: [PATCH] =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E4=B8=9D=E8=88=AC=E9=A1=BA?= =?UTF-8?q?=E6=BB=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/yilia/layout/_partial/aside.ejs | 2 +- themes/yilia/layout/layout.ejs | 1 + themes/yilia/source-src/css/article-main.scss | 2 +- themes/yilia/source-src/css/grid.scss | 4 +- themes/yilia/source-src/css/mobile.scss | 1 + themes/yilia/source-src/js/aside.js | 64 ++++++++++--------- 6 files changed, 40 insertions(+), 34 deletions(-) diff --git a/themes/yilia/layout/_partial/aside.ejs b/themes/yilia/layout/_partial/aside.ejs index 1f24950..4f7c0c6 100644 --- a/themes/yilia/layout/_partial/aside.ejs +++ b/themes/yilia/layout/_partial/aside.ejs @@ -2,7 +2,7 @@
<% if (theme.top){ %> diff --git a/themes/yilia/layout/layout.ejs b/themes/yilia/layout/layout.ejs index 5c681d0..a2395a5 100644 --- a/themes/yilia/layout/layout.ejs +++ b/themes/yilia/layout/layout.ejs @@ -15,6 +15,7 @@
+ <%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %>
diff --git a/themes/yilia/source-src/css/article-main.scss b/themes/yilia/source-src/css/article-main.scss index 337a96b..5fc758e 100644 --- a/themes/yilia/source-src/css/article-main.scss +++ b/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; diff --git a/themes/yilia/source-src/css/grid.scss b/themes/yilia/source-src/css/grid.scss index 5de152c..fcecb72 100644 --- a/themes/yilia/source-src/css/grid.scss +++ b/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 { diff --git a/themes/yilia/source-src/css/mobile.scss b/themes/yilia/source-src/css/mobile.scss index 2c4b6ed..2378f4a 100644 --- a/themes/yilia/source-src/css/mobile.scss +++ b/themes/yilia/source-src/css/mobile.scss @@ -1,4 +1,5 @@ .body-wrap { + padding-top: 0; margin-bottom: 0; } .left-col { diff --git a/themes/yilia/source-src/js/aside.js b/themes/yilia/source-src/js/aside.js index 17a5e61..7eeafec 100644 --- a/themes/yilia/source-src/js/aside.js +++ b/themes/yilia/source-src/js/aside.js @@ -1,46 +1,48 @@ var backTop = function (domE, ctn, distance) { - if (!domE) return; - var timer = null; - var _onscroll = (ctn || window).onscroll, - _onclick = domE.onclick; - (ctn || window).onscroll = throttle(function () { - typeof _onscroll === 'function' && _onscroll.apply(this, arguments); - toggleDomE(); - }, 100); - domE.onclick = function () { - typeof _onclick === 'function' && _onclick.apply(this, arguments); - timer = setInterval(function () { //设置一个计时器 - var ct = ctn.scrollTop || document.documentElement.scrollTop || document.body.scrollTop; //获取距离顶部的距离 - var diff = Math.max(10, ct / 6); - ct -= diff; - if (ct > 0) {//如果与顶部的距离大于零 - ctn.scrollTop = ctn.scrollTop - diff; - window.scrollTo(0, ct);//向上移动10px - } else {//如果距离小于等于零 - ctn.scrollTop = 0; - window.scrollTo(0, 0);//移动到顶部 - clearInterval(timer);//清除计时器 - } - }, 10);//隔10ms执行一次前面的function，展现一种平滑滑动效果 - }; + if (!domE) return + var timer = null + var _onscroll = ctn.onscroll + ctn.onscroll = throttle(function () { // 滚动到一定高度才显示"回到顶部"按钮 + typeof _onscroll === 'function' && _onscroll.apply(this, arguments) + toggleDomE() + }, 100) + if(!window.getComputedStyle || window.getComputedStyle(ctn).scrollBehavior === undefined) { + // 浏览器不支持scroll-behavior属性 + domE.querySelector('a[href="#top"]').addEventListener('click', function (event) { + event.preventDefault() + timer = setInterval(function () { //设置一个计时器 + var ct = ctn.scrollTop || document.documentElement.scrollTop || document.body.scrollTop //获取距离顶部的距离 + var diff = Math.max(10, ct / 6) + ct -= diff + if (ct > 0) {//如果与顶部的距离大于零 + ctn.scrollTop = ctn.scrollTop - diff + window.scrollTo(0, ct)//向上移动10px + } else {//如果距离小于等于零 + ctn.scrollTop = 0 + window.scrollTo(0, 0)//移动到顶部 + clearInterval(timer)//清除计时器 + } + }, 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; - if (timer) clearTimeout(timer); + var self = this, args = arguments + if (timer) clearTimeout(timer) timer = setTimeout(function () { - return typeof func === 'function' && func.apply(self, args); - }, wait); + return typeof func === 'function' && func.apply(self, args) + }, 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 } \ No newline at end of file