feat: add toTop button 添加返回顶部按钮

Put a toTop button on the right for quick scrolling. 在页面右边加了个返回顶部按钮便于页面跳转。 http://www.cnblogs.com/jingangel/archive/2012/03/08/2385939.html
MOxFIVE · Aug 22, 2015 · c1a3786 · c1a3786
1 parent e29de4b
commit c1a3786
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/themes/Yilia/layout/_partial/article.ejs b/themes/Yilia/layout/_partial/article.ejs
@@ -48,6 +48,17 @@
           }
         }
         </script>
+        
+        <div id="toTop">↑</div>
+        <script>
+        window.onload = function(){
+          var to_top = document.getElementById("toTop");
+          to_top.onclick = function(){
+            document.documentElement.scrollTop = document.body.scrollTop =0;
+          }
+        }  
+        </script>
+
         <%- post.content %>
       <% } %>
     </div>

diff --git a/themes/Yilia/source/css/_partial/article.styl b/themes/Yilia/source/css/_partial/article.styl
@@ -396,4 +396,23 @@
 }
 #toc .toc-child {
     padding-left: 1.25em
+}
+
+#toTop{
+  display:block;
+  padding:0.05em;
+  border-radius:0.15em;
+  width:1.1em;
+  height:1.4em;
+  line-height:1.3em;
+  font-size:1.5em;
+  font-family: Calibri;
+  text-align: center;
+  background:lightgray; 
+  position: fixed;
+  cursor: pointer;
+  color: #fff;
+  top: 40%;
+  right: 1px;
+  opacity:0.6;
 }