Add a scroll to top button siteConfig option (#723)

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;

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"

lib/core/Site.js

@@ -161,6 +161,7 @@ class Site extends React.Component {
                 }}
               />
             ))}
+
           {process.env.NODE_ENV === 'development' && (
             <script
               src={`http://localhost:${

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;