From aee255219bedc97b55048cdb4703742cbb7c247e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lespagnol=20R=C3=A9my?= <remy.lespagnol@gmail.com>
Date: Wed, 6 Jun 2018 21:34:32 +0200
Subject: [PATCH] Add a scroll to top button siteConfig option (#723)

---
 docs/api-site-config.md |  8 ++++++++
 lib/core/Head.js        | 27 +++++++++++++++++++++++++++
 lib/core/Site.js        |  1 +
 website/siteConfig.js   |  4 ++++
 4 files changed, 40 insertions(+)

diff --git a/docs/api-site-config.md b/docs/api-site-config.md
index 8f36a49377..b706c69a92 100644
--- a/docs/api-site-config.md
+++ b/docs/api-site-config.md
@@ -153,6 +153,10 @@ h1 {
 
 `separateCss` - Folders inside which any `css` files will not be processed and concatenated to Docusaurus' styles. This is to support static `html` pages that may be separate from Docusaurus with completely separate styles.
 
+`scrollToTop` - Set this to `true` if you want to enable the scroll to top button at the bottom of your site.
+
+`scrollToTopOptions` - Optional options configuration for the scroll to top button. You do not need to use this, even if you set `scrollToTop` to `true`; it just provides you more configuration control of the button. You can find more options [here](https://github.com/vfeskov/vanilla-back-to-top/blob/v7.1.14/OPTIONS.md). By default, we set the zIndex option to 100. 
+
 `stylesheets` - Array of CSS sources to load. The link tag will be inserted in the HTML head.
 
 `translationRecruitingLink` - URL for the `Help Translate` tab of language selection when languages besides English are enabled. This can be included you are using translations but does not have to be.
@@ -246,6 +250,10 @@ const siteConfig = {
   twitterUsername: 'docusaurus',
   twitterImage: 'img/docusaurus.png',
   ogImage: 'img/docusaurus.png',
+  scrollToTop: true,
+  scrollToTopOptions: {
+    zIndex: 100
+  }
 };
 
 module.exports = siteConfig;
diff --git a/lib/core/Head.js b/lib/core/Head.js
index 04d68e080b..1334796bef 100644
--- a/lib/core/Head.js
+++ b/lib/core/Head.js
@@ -149,6 +149,33 @@ class Head extends React.Component {
             );
           })}
 
+        {this.props.config.scrollToTop && (
+          <script
+            src={
+              'https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js'
+            }
+          />
+        )}
+        {this.props.config.scrollToTop && (
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+        document.addEventListener("DOMContentLoaded", function(){
+          addBackToTop(
+            ${JSON.stringify(
+              Object.assign(
+                {},
+                {zIndex: 100},
+                this.props.config.scrollToTopOptions
+              )
+            )}
+          )
+        });
+        `,
+            }}
+          />
+        )}
+
         {/* Site defined code. Keep these at the end to avoid overriding. */}
         <link
           rel="stylesheet"
diff --git a/lib/core/Site.js b/lib/core/Site.js
index 56cd611bbb..211245ee52 100644
--- a/lib/core/Site.js
+++ b/lib/core/Site.js
@@ -161,6 +161,7 @@ class Site extends React.Component {
                 }}
               />
             ))}
+
           {process.env.NODE_ENV === 'development' && (
             <script
               src={`http://localhost:${
diff --git a/website/siteConfig.js b/website/siteConfig.js
index 0cd93d4abb..210a9b145f 100644
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@@ -62,6 +62,10 @@ const siteConfig = {
   ogImage: 'img/docusaurus.png',
   twitterImage: 'img/docusaurus.png',
   onPageNav: 'separate',
+  scrollToTop: true,
+  scrollToTopOptions: {
+    zIndex: 100
+  }
 };
 
 module.exports = siteConfig;