Add Home nav tab and scroll to top button

Author: shahidghafoor00

index.html

@@ -19,6 +19,7 @@
     <a href="#hero"><img src="assets/logo.svg" alt="Codebase" /></a>
   </div>
   <ul class="nav-links">
+    <li><a href="#hero">Home</a></li>
     <li><a href="#about">About</a></li>
     <li><a href="#services">Services</a></li>
     <li><a href="#reviews">Reviews</a></li>
@@ -424,6 +425,10 @@ <h2 class="section-title">Let's build something great together</h2>
   </div>
 </footer>
 
+<button id="scrollTop" aria-label="Scroll to top">
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
+</button>
+
 <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -24,6 +24,15 @@ document.querySelectorAll('.nav-links a').forEach(link => {
   link.addEventListener('click', () => navLinks.classList.remove('open'));
 });
 
+// ── SCROLL TO TOP ──
+const scrollTopBtn = document.getElementById('scrollTop');
+window.addEventListener('scroll', () => {
+  scrollTopBtn.classList.toggle('visible', window.scrollY > 400);
+});
+scrollTopBtn.addEventListener('click', () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+});
+
 // ── ACTIVE NAV HIGHLIGHT ──
 const sections = document.querySelectorAll('section[id]');
 const navAnchors = document.querySelectorAll('.nav-links a[href^="#"]');

styles.css

@@ -743,6 +743,31 @@ body.dark #contact iframe {
 body.dark footer { background: #050505; }
 body.dark .footer-logo img { filter: invert(0); opacity: 0.5; }
 
+/* ── SCROLL TO TOP ── */
+#scrollTop {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  width: 44px; height: 44px;
+  background: var(--black);
+  color: var(--white);
+  border: none;
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer;
+  z-index: 99;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(10px);
+  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+}
+#scrollTop.visible { opacity: 1; pointer-events: all; transform: translateY(0); }
+#scrollTop:hover { background: var(--gray-800); transform: translateY(-3px); }
+
+body.dark #scrollTop { background: #fff; color: #000; }
+body.dark #scrollTop:hover { background: #e8e8e8; }
+
 /* ── SCROLL ANIMATIONS ── */
 .fade-up {
   opacity: 0;