diff --git a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx index e17c91c..88311fa 100644 --- a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx +++ b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx @@ -1,5 +1,5 @@ // EditorQuiz.tsx -import React, { useState, useEffect, useRef } from 'react'; +import React, { useState, useEffect, useRef, CSSProperties } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import { FolderType } from '../../../Types/FolderType'; @@ -40,6 +40,26 @@ const QuizForm: React.FC = () => { }; const fileInputRef = useRef(null); const [dialogOpen, setDialogOpen] = useState(false); + const [showScrollButton, setShowScrollButton] = useState(false); + + 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 () => { @@ -292,8 +312,32 @@ const QuizForm: React.FC = () => { + {showScrollButton && ( + + )} ); }; +const scrollToTopButtonStyle: CSSProperties = { + position: 'fixed', + bottom: '40px', + right: '50px', + padding: '10px', + fontSize: '16px', + color: 'white', + backgroundColor: '#5271ff', + border: 'none', + cursor: 'pointer', + zIndex: 1000, +}; + export default QuizForm;