Add button to scroll to the top of the editQuiz page

client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx

@@ -40,6 +40,7 @@ const QuizForm: React.FC = () => {
     };
     const fileInputRef = useRef<HTMLInputElement>(null);
     const [dialogOpen, setDialogOpen] = useState(false);
+    const [showScrollButton, setShowScrollButton] = useState(false);
 
     const scrollToImagesSection = (event: { preventDefault: () => void; }) => {
         event.preventDefault();
@@ -49,6 +50,26 @@ const QuizForm: React.FC = () => {
         }
     };
 
+    const scrollToTop = () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+
+
+    useEffect(() => {
+        const handleScroll = () => {
+            if (window.scrollY > 300) {
+                setShowScrollButton(true);
+            } else {
+                setShowScrollButton(false);
+            }
+        };
+
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+
     useEffect(() => {
         const fetchData = async () => {
             const userFolders = await ApiService.getUserFolders();
@@ -295,6 +316,11 @@ const QuizForm: React.FC = () => {
 
                     <GiftCheatSheet />
 
+                {showScrollButton && (
+                <button onClick={scrollToTop} style={scrollToTopButtonStyle}>
+                    ↑
+                </button>
+            )}
                 </div>
 
                 <div className='preview'>
@@ -312,4 +338,19 @@ const QuizForm: React.FC = () => {
     );
 };
 
+// CSS for the Scroll-to-Top Button
+const scrollToTopButtonStyle: React.CSSProperties = {
+    position: 'fixed',
+    bottom: '40px',
+    right: '50px',
+    padding: '10px 20px',
+    fontSize: '16px',
+    borderRadius: '5px',
+    backgroundColor: '#5271ff',
+    border: 'none',
+    color: 'white',
+    cursor: 'pointer',
+    zIndex: 1000,
+};
+
 export default QuizForm;