back to top start

Gaohaoyang · Gaohaoyang · commit f369fe022764 · 2016-05-11T15:02:25.000+08:00
diff --git a/_includes/backToTop.html b/_includes/backToTop.html
@@ -0,0 +1,5 @@
+<div class="back-to-top">
+    <a href="#">
+        <i class="fa fa-arrow-up" aria-hidden="true"></i>
+    </a>
+</div>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -29,4 +29,3 @@
     </div>
 </footer>
 <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
-<script src="{{ " /js/main.js " | prepend: site.baseurl }}" charset="utf-8"></script>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -10,7 +10,8 @@
         {{ content }}
 
     {% include footer.html %}
-
+    {% include backToTop.html %}
+    <script src="{{ " /js/main.js " | prepend: site.baseurl }}" charset="utf-8"></script>
   </body>
 
 </html>
diff --git a/_sass/_backToTop.scss 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
@@ -57,7 +57,8 @@
         "index",
         "demo",
         "footer",
-        "scrollbar"
+        "scrollbar",
+        "backToTop"
 ;
 
 // 两个人在列车上相遇
diff --git 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')
+        }
+    }
+}());

Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,8 @@`
`57`	`57`	`"index",`
`58`	`58`	`"demo",`
`59`	`59`	`"footer",`
`60`		`- "scrollbar"`
	`60`	`+ "scrollbar",`
	`61`	`+ "backToTop"`
`61`	`62`	`;`
`62`	`63`
`63`	`64`	`// 两个人在列车上相遇`