Add back to top button on en page

Author: kindy

tutorial.css

@@ -128,3 +128,29 @@ div.tright, div.floatright, table.floatright {
     border: medium none !important;
     direction: ltr;
 }
+
+.backtop-box {
+  position: fixed; left: 180px; bottom: 20px;
+}
+.backtop-box b {
+  display: block; cursor: pointer;
+  width: 40px; height: 40px;
+  opacity: 0;
+  background: #fff;;
+  text-align: center;
+  border: 1px solid #aaa;
+  border-radius: 18px 2px 2px 2px;
+  -moz-border-radius: 18px 2px 2px 2px;
+  -webkit-border-radius: 18px 2px 2px 2px;
+  -o-border-radius: 18px 2px 2px 2px;
+  -ms-border-radius: 18px 2px 2px 2px;
+  line-height: 40px;
+  color: #666;
+}
+.backtop-box b:hover {
+  background: #eee;
+}
+.backtop-box-show b {
+  opacity: 1;
+}
+

utils/gen-html-index-en.pl

@@ -101,6 +101,41 @@
 
 $res .= "</section>\n";
 
+$res .= <<_EOC_;
+<script>
+function init_back_top() {
+    function _fn() {
+        var t = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
+        if (t > 5) {
+            if (! show) {
+                show = true;
+                r.className = 'backtop-box-show';
+            }
+        } else {
+            if (show) {
+                show = false;
+                r.className = '';
+            }
+        }
+    }
+
+    var r = document.createElement('div');
+    document.body.appendChild(r);
+    r.innerHTML = '<div class="backtop-box"><b title="Jump to Top of Page">Top</b></div>';
+
+    var show = false;
+    r.onclick = function() {
+        window.scrollTo(0, 0);
+    };
+
+    window.onscroll = _fn;
+    window.onresize = _fn;
+}
+
+init_back_top();
+</script>
+_EOC_
+
 $res .= "</body></html>";
 
 if ($outfile) {