From f369fe0227644f5b272f51c13473718be120f3ba Mon Sep 17 00:00:00 2001 From: Gaohaoyang Date: Wed, 11 May 2016 15:02:25 +0800 Subject: [PATCH 1/5] back to top start --- _includes/backToTop.html | 5 +++++ _includes/footer.html | 1 - _layouts/default.html | 3 ++- _sass/_backToTop.scss | 25 +++++++++++++++++++++++++ css/main.scss | 3 ++- js/main.js | 18 ++++++++++++++++++ 6 files changed, 52 insertions(+), 3 deletions(-) create mode 100644 _includes/backToTop.html create mode 100644 _sass/_backToTop.scss diff --git a/_includes/backToTop.html b/_includes/backToTop.html new file mode 100644 index 00000000000..aa8d0438d51 --- /dev/null +++ b/_includes/backToTop.html @@ -0,0 +1,5 @@ +
+ + + +
diff --git a/_includes/footer.html b/_includes/footer.html index 8695ce58631..4175fc995f1 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -29,4 +29,3 @@ - diff --git a/_layouts/default.html b/_layouts/default.html index 2cd91731648..3e2e60b4d45 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -10,7 +10,8 @@ {{ content }} {% include footer.html %} - + {% include backToTop.html %} + diff --git a/_sass/_backToTop.scss b/_sass/_backToTop.scss new file mode 100644 index 00000000000..53984fb66fb --- /dev/null +++ b/_sass/_backToTop.scss @@ -0,0 +1,25 @@ +.back-to-top { + position: fixed; + left: 50%; + margin-left: 580px; + bottom: 37px; + background-color: #f8f8fd; + visibility: hidden; + opacity: 0; + transition: 0.4s ease; + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3), 0 0 30px rgba(10, 10, 0, 0.1) inset; + a { + display: block; + background-color: #eee; + width: 38px; + height: 38px; + line-height: 38px; + text-align: center; + font-size: 20px; + color: #b4b4b4; + } +} +.back-to-top-show{ + visibility: visible; + opacity: 1; +} diff --git a/css/main.scss b/css/main.scss index 4314e568337..5eb53f1e389 100644 --- a/css/main.scss +++ b/css/main.scss @@ -57,7 +57,8 @@ "index", "demo", "footer", - "scrollbar" + "scrollbar", + "backToTop" ; // 两个人在列车上相遇 diff --git a/js/main.js b/js/main.js index 159abc08964..8b56f5d4b55 100644 --- a/js/main.js +++ b/js/main.js @@ -27,3 +27,21 @@ }) } }()); + + +//////////////////////////back to top//////////////////////////// +(function() { + var backToTop = document.querySelector('.back-to-top') + console.log(backToTop); + window.onscroll = function() { + + // 页面顶部滚进去的距离 + var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + + if (scrollTop>200) { + backToTop.classList.add('back-to-top-show') + }else{ + backToTop.classList.remove('back-to-top-show') + } + } +}()); From 9bc1c273cb3f387dde0abf91ac5274c1220814aa Mon Sep 17 00:00:00 2001 From: Gaohaoyang Date: Wed, 11 May 2016 15:31:58 +0800 Subject: [PATCH 2/5] add animation of scroll --- _includes/backToTop.html | 2 +- _includes/header.html | 2 +- _layouts/default.html | 1 + _layouts/post.html | 1 - js/main.js | 17 ++++++++++++----- page/0archives.html | 1 - page/1category.html | 1 - page/2tags.html | 1 - 8 files changed, 15 insertions(+), 11 deletions(-) diff --git a/_includes/backToTop.html b/_includes/backToTop.html index aa8d0438d51..e98e001b8a7 100644 --- a/_includes/backToTop.html +++ b/_includes/backToTop.html @@ -1,5 +1,5 @@
- +
diff --git a/_includes/header.html b/_includes/header.html index d2122dc513b..1b05740f267 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,4 +1,4 @@ -
+
{{ site.title }} {{site.brief-intro}} diff --git a/_layouts/default.html b/_layouts/default.html index 3e2e60b4d45..6ea0ee96b8a 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -12,6 +12,7 @@ {% include footer.html %} {% include backToTop.html %} + diff --git a/_layouts/post.html b/_layouts/post.html index 468f42d9936..42ad7a14767 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -97,5 +97,4 @@

Comments

} }()); - diff --git a/js/main.js b/js/main.js index 8b56f5d4b55..0bf794a3732 100644 --- a/js/main.js +++ b/js/main.js @@ -32,16 +32,23 @@ //////////////////////////back to top//////////////////////////// (function() { var backToTop = document.querySelector('.back-to-top') - console.log(backToTop); - window.onscroll = function() { + var backToTopA = document.querySelector('.back-to-top a') + // console.log(backToTop); + window.addEventListener('scroll',function () { + // 页面顶部滚进去的距离 var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop) - if (scrollTop>200) { + if (scrollTop > 200) { backToTop.classList.add('back-to-top-show') - }else{ + } else { backToTop.classList.remove('back-to-top-show') } - } + }) + + // backToTopA.addEventListener('click',function (e) { + // e.preventDefault() + // window.scrollTo(0,0) + // }) }()); diff --git a/page/0archives.html b/page/0archives.html index bc4a29d1e2c..5698cc96596 100644 --- a/page/0archives.html +++ b/page/0archives.html @@ -65,5 +65,4 @@

{{ post.date | date: '%Y' }}

- diff --git a/page/1category.html b/page/1category.html index f0f0bc46c35..b8f7a7ce51e 100644 --- a/page/1category.html +++ b/page/1category.html @@ -55,5 +55,4 @@

{{category | first}}

- diff --git a/page/2tags.html b/page/2tags.html index 7ac7be16baf..f6ef067ba9a 100644 --- a/page/2tags.html +++ b/page/2tags.html @@ -59,5 +59,4 @@

{{ tag }}

- From 430cdb1bc8c7833fb3709f2754373ef6785fc60e Mon Sep 17 00:00:00 2001 From: Gaohaoyang Date: Wed, 11 May 2016 15:56:25 +0800 Subject: [PATCH 3/5] mobile fit --- _sass/_backToTop.scss | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/_sass/_backToTop.scss b/_sass/_backToTop.scss index 53984fb66fb..fc085c0f44b 100644 --- a/_sass/_backToTop.scss +++ b/_sass/_backToTop.scss @@ -21,5 +21,26 @@ } .back-to-top-show{ visibility: visible; - opacity: 1; + opacity: 0.7; +} +@media screen and (max-width:1200px) and (min-width: 770px) { + .back-to-top { + left: 50%; + margin-left: 45.5%; + } +} +@media screen and (max-width: 770px) { + .back-to-top { + right:2.5%; + left: auto; + // left: 50%; + margin-left: 0px; + a { + width: 35px; + height: 35px; + line-height: 35px; + text-align: center; + font-size: 18px; + } + } } From 305848db8e1787b5319e9f53a09ba05fb571d56f Mon Sep 17 00:00:00 2001 From: Gaohaoyang Date: Wed, 11 May 2016 15:58:17 +0800 Subject: [PATCH 4/5] mobile fit2 --- _sass/_backToTop.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_sass/_backToTop.scss b/_sass/_backToTop.scss index fc085c0f44b..6e819217107 100644 --- a/_sass/_backToTop.scss +++ b/_sass/_backToTop.scss @@ -36,9 +36,9 @@ // left: 50%; margin-left: 0px; a { - width: 35px; - height: 35px; - line-height: 35px; + width: 33px; + height: 33px; + line-height: 33px; text-align: center; font-size: 18px; } From cd964e7aa1771bea9bbcb72a71e22c09b2f33b0d Mon Sep 17 00:00:00 2001 From: Gaohaoyang Date: Wed, 11 May 2016 16:18:11 +0800 Subject: [PATCH 5/5] remove redundancy and fix a tag --- _layouts/page.html | 1 - _layouts/post.html | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/_layouts/page.html b/_layouts/page.html index 72ff46c794e..0019dc18c95 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -25,5 +25,4 @@

{{page.title}}

- diff --git a/_layouts/post.html b/_layouts/post.html index 42ad7a14767..952247eb984 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -91,7 +91,7 @@

Comments

* target _blank */ (function() { - var aTags = document.querySelectorAll('article a') + var aTags = document.querySelectorAll('article a:not([id])') for (var i = 0; i < aTags.length; i++) { aTags[i].setAttribute('target', '_blank') }