Add Back to Top button

src/app/ideas/[id]/IdeaAnalysisReport.tsx

@@ -2,6 +2,7 @@
 
 import { useRouter } from 'next/navigation'
 import React, { useEffect, useState } from 'react'
+import BackToTopButton from '@/components/BackToTopButton'
 import FeedbackForm from '@/components/FeedbackForm'
 import HorizontalLine from '@/components/HorizontalLine'
 import MessageBox from '@/components/MessageBox'
@@ -395,6 +396,8 @@ export const IdeaAnalysisReport = ({ data }: Props) => {
           Remove Idea
         </button>
       </div>
+
+      <BackToTopButton />
     </div>
   )
 }

src/components/BackToTopButton.tsx

@@ -0,0 +1,34 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+
+const BackToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsVisible(window.scrollY > 300)
+    }
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  return (
+    <>
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          className="fixed bottom-8 right-8 hidden rounded-lg px-4 py-3 text-2xl text-white shadow-lg transition-colors duration-300 hover:bg-blue-600 focus:outline-none md:bottom-10 md:right-10 md:block"
+          aria-label="Back to Top"
+        >
+          ⬆️
+        </button>
+      )}
+    </>
+  )
+}
+
+export default BackToTopButton