create the moveCommentButton component

src/client/js/components/MoveCommentButton.jsx

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+
+import NavigationContainer from '../services/NavigationContainer';
+
+import { withUnstatedContainers } from './UnstatedUtils';
+
+const WIKI_HEADER_LINK = 120;
+
+/**
+ * @author Kaori Tokashiki <kaori@weseek.co.jp>
+ *
+ */
+const MoveCommentButton = (props) => {
+
+  const { navigationContainer } = props;
+
+  // get element for smoothScroll
+  const getCommentListDom = useMemo(() => { return document.getElementById('page-comments-list') }, []);
+
+  return (
+    <button
+      type="button"
+      className="btn btn-outline-secondary btn-sm"
+      onClick={() => navigationContainer.smoothScrollIntoView(getCommentListDom, WIKI_HEADER_LINK)}
+    >
+      <i className="mr-2 icon-fw icon-bubbles"></i>
+      <span>Comments</span>
+    </button>
+  );
+
+};
+
+MoveCommentButton.propTypes = {
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
+};
+
+export default withUnstatedContainers(MoveCommentButton, [NavigationContainer]);

src/client/js/components/Page/DisplaySwitcher.jsx

@@ -12,6 +12,7 @@ import UserContentsLinks from '../UserContentsLinks';
 import PageAccessories from '../PageAccessories';
 import PageEditorByHackmd from '../PageEditorByHackmd';
 import EditorNavbarBottom from '../PageEditor/EditorNavbarBottom';
+import MoveCommentButton from '../MoveCommentButton';
 
 
 const DisplaySwitcher = (props) => {
@@ -37,6 +38,7 @@ const DisplaySwitcher = (props) => {
                   <div id="revision-toc" className="revision-toc">
                     <TableOfContents />
                   </div>
+                  <MoveCommentButton />
                   {pageUser && <UserContentsLinks />}
                 </div>
               </div>