Merge pull request #31 from rajasmitaa/scroll-to-top

Scroll-to-top button feature

Author: Varshitha713

index.html

@@ -303,8 +303,47 @@ <h3>Sara Ahmed</h3>
             <p>Built with ❤️ for showcasing amazing front-end projects</p>
         </div>
     </footer>
+    <button id="scrollToTopBtn" title="Go to top">↑</button>
+    <script src="script.js"></script>
+    <script>
+    const toggle = document.getElementById('darkModeToggle');
+    const body = document.body;
+    const icon = document.getElementById('themeIcon');
 
+    // Load preference
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark') {
+        body.classList.add('dark-theme');
+        icon.textContent = '☀️'; // Sun in dark mode
+    } else {
+        icon.textContent = '🌙'; // Moon in light mode
+    }
 
-    <script src="script.js"></script>
-</body>
-</html>
+    toggle.addEventListener('click', () => {
+        body.classList.toggle('dark-theme');
+        const theme = body.classList.contains('dark-theme') ? 'dark' : 'light';
+        localStorage.setItem('theme', theme);
+
+        // Update icon
+        icon.textContent = theme === 'dark' ? '☀️' : '🌙';
+</script>
+
+    
+<script>
+    const scrollToTopBtn = document.getElementById("scrollToTopBtn");
+
+// Show button when user scrolls down
+window.addEventListener("scroll", () => {
+    scrollToTopBtn.style.display = window.scrollY > 300 ? "block" : "none";
+});
+
+// Scroll to top smoothly
+scrollToTopBtn.addEventListener("click", () => {
+    window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+    });
+});
+
+</script>
+  </body>

style.css

@@ -794,4 +794,26 @@ body.dark-theme .fill-btn:hover {
   }
 }
 
-/* ------------------------------------------- */
+/* ------------------------------------------- */
+        #scrollToTopBtn {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    z-index: 999;
+    background-color: #667eea;
+    color: white;
+    border: none;
+    outline: none;
+    padding: 0.75rem 1rem;
+    border-radius: 50%;
+    font-size: 1.25rem;
+    cursor: pointer;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+    display: none;
+    transition: background 0.3s ease, transform 0.3s ease;
+}
+
+#scrollToTopBtn:hover {
+    background-color: #5a67d8;
+    transform: scale(1.1);
+}