Merge pull request #2243 from kazuhitonakayama/add-button-for-scrolling-to-top

Place a scrollable button to the top of the page

Author: heiskr

includes/scroll-button.html

@@ -0,0 +1,3 @@
+<button class="arrow-for-scrolling-top" id="js-scroll-top">
+    {% octicon "chevron-up" %}
+</button>

javascripts/index.js

@@ -2,6 +2,7 @@
 import '../stylesheets/index.scss'
 import displayPlatformSpecificContent from './display-platform-specific-content'
 import explorer from './explorer'
+import scrollUp from './scroll-up'
 import search from './search'
 import nav from './nav'
 import browserDateFormatter from 'browser-date-formatter'
@@ -23,6 +24,7 @@ import airgapLinks from './airgap-links'
 document.addEventListener('DOMContentLoaded', async () => {
   displayPlatformSpecificContent()
   explorer()
+  scrollUp()
   search()
   nav()
   browserDateFormatter()

javascripts/scroll-up.js

@@ -0,0 +1,22 @@
+export default function () {
+  // function to scroll up to page top
+  const PageTopBtn = document.getElementById('js-scroll-top')
+  if (!PageTopBtn) return
+
+  PageTopBtn.addEventListener('click', (e) => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  })
+
+  // show scroll button only when display is scroll down
+  window.addEventListener('scroll', function () {
+    const y = document.documentElement.scrollTop // get the height from page top
+    if (y < 100) {
+      PageTopBtn.classList.remove('show')
+    } else if (y >= 100) {
+      PageTopBtn.classList.add('show')
+    }
+  })
+}

layouts/default.html

@@ -15,6 +15,7 @@
       {% endif %}
       {% include support-section %}
       {% include small-footer %}
+      {% include scroll-button %}
     </main>
   </body>
 </html>

stylesheets/index.scss

@@ -47,6 +47,7 @@ $marketing-font-path: "/dist/fonts/";
 @import "search.scss";
 @import "overrides.scss";
 @import "sidebar.scss";
+@import "scroll-button.scss";
 @import "explorer.scss";
 // from https://unpkg.com/highlight.js@9.15.8/styles/github.css
 @import "syntax-highlighting.scss";

stylesheets/scroll-button.scss

@@ -0,0 +1,18 @@
+button.arrow-for-scrolling-top {
+    opacity: 0;
+    transition: 1s;
+    background-color: #0367d6;
+    color: #fff;
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    display: block;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    &.show {
+        opacity: 1;
+        border: none;
+        transition: 1s;
+    }
+}