add scroll to component

components/ScrollTopAndComment.js

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react'
+import smoothscroll from 'smoothscroll-polyfill'
+
+const ScrollTopAndComment = () => {
+  const [show, setShow] = useState(false)
+
+  useEffect(() => {
+    smoothscroll.polyfill()
+    const handleWindowScroll = () => {
+      if (window.scrollY > 50) setShow(true)
+      else setShow(false)
+    }
+
+    window.addEventListener('scroll', handleWindowScroll)
+    return () => window.removeEventListener('scroll', handleWindowScroll)
+  }, [])
+
+  const handleScrollTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+  const handleScrollToComment = () => {
+    document.getElementById('comment').scrollIntoView()
+  }
+  return (
+    <div className="fixed flex-col hidden gap-3 right-8 bottom-8 md:flex">
+      <button
+        aria-label="Scroll To Comment"
+        type="button"
+        onClick={handleScrollToComment}
+        style={{ opacity: show ? 1 : 0 }}
+        className="p-2 text-gray-500 transition-all bg-gray-200 rounded-full dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-300"
+      >
+        <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+          <path
+            fillRule="evenodd"
+            d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </button>
+      <button
+        aria-label="Scroll To Top"
+        type="button"
+        onClick={handleScrollTop}
+        style={{ opacity: show ? 1 : 0 }}
+        className="p-2 text-gray-500 transition-all bg-gray-200 rounded-full dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-300"
+      >
+        <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+          <path
+            fillRule="evenodd"
+            d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </button>
+    </div>
+  )
+}
+
+export default ScrollTopAndComment

components/comments/index.js

@@ -37,7 +37,7 @@ const Comments = ({ frontMatter }) => {
       break
   }
   return (
-    <>
+    <div id="comment">
       {siteMetadata.comment && siteMetadata.comment.provider === 'giscus' && (
         <GiscusComponent mapping={term} />
       )}
@@ -47,7 +47,7 @@ const Comments = ({ frontMatter }) => {
       {siteMetadata.comment && siteMetadata.comment.provider === 'disqus' && (
         <DisqusComponent frontMatter={frontMatter} />
       )}
-    </>
+    </div>
   )
 }