[TUTORIAL] Cum sa adaugi un buton - inapoi sus (scroll-top) elegant

[GanGster 516]

Învață cum să adaugi un buton modern de tip „Înapoi sus” (scroll-top) care apare doar atunci când utilizatorul derulează în jos. Design elegant, fluid și compatibil cu toate browserele moderne — fără pluginuri.

Cuprins

1. Concept și funcționalitate
2. HTML — plasarea butonului
3. CSS — design elegant și animație
4. JavaScript — logica de afișare și derulare
5. Variante & îmbunătățiri
6. Checklist rapid

1) Concept și funcționalitate

• Butonul nu este vizibil când utilizatorul e în partea de sus a paginii.
• Devine vizibil după ce s-a derulat 400px sau mai mult.
• La click, se declanșează o derulare lină în sus (scroll smooth).
• Design minimalist, colțuri rotunjite, shadow subtil și animație la hover.

2) HTML — plasarea butonului

Adaugă butonul la finalul corpului, chiar înainte de </body>. Poți folosi o iconiță (↑) sau un SVG modern.

<!-- Buton „Înapoi sus” -->
<button id="scrollTopBtn" aria-label="Înapoi sus" title="Înapoi sus">↑</button>

3) CSS — design elegant și animație

Cod CSS complet, modern, compatibil cu dark mode. Butonul este poziționat în colțul dreapta-jos, cu efect de fade-in / fade-out.

<style>
/* Stil general */
#scrollTopBtn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(145deg, #f97316, #fb923c);
  color: white;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  z-index: 9999;
}

/* Efect de apariție */
#scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Animație hover */
#scrollTopBtn:hover {
  background: linear-gradient(145deg, #fb923c, #f97316);
  transform: translateY(-3px);
}

/* Animație click */
#scrollTopBtn:active {
  transform: translateY(1px);
}

/* Preferință accesibilitate */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}
</style>

4) JavaScript — logica de afișare și derulare

Adaugă acest script sub CSS, de preferat înainte de </body>. Folosește API-ul window.scrollTo() pentru un efect smooth.

<script>
document.addEventListener("DOMContentLoaded", function() {
  const scrollBtn = document.getElementById("scrollTopBtn");

  // Afișare la scroll
  window.addEventListener("scroll", () => {
    if (window.scrollY > 400) {
      scrollBtn.classList.add("show");
    } else {
      scrollBtn.classList.remove("show");
    }
  });

  // Scroll lin către top
  scrollBtn.addEventListener("click", () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  });
});
</script>

5) Variante & îmbunătățiri

• 💎 Poți înlocui simbolul „↑” cu un SVG modern: <svg viewBox="0 0 24 24"><path d="M12 4l-8 8h16z"/></svg>
• 🌗 Adaugă o clasă .dark dacă site-ul tău are mod întunecat — schimbă gradientul pentru contrast mai bun.
• 🎨 Poți adăuga tooltip personalizat (de ex. „Sus ↑”) folosind atributul title.
• ⚡ Folosește scroll-behavior: smooth; direct pe html pentru efect nativ.

6) Checklist rapid

• ✅ Adăugat butonul în HTML (de preferat în footer).
• ✅ Stilat cu CSS (gradient, rotund, umbră, animații).
• ✅ JS simplu și performant (detectare scroll + scrollTo smooth).
• ✅ Contrast bun între fundal și text (verificat Lighthouse).
• ✅ Testat pe mobil, desktop și mod întunecat.

💡 Pro tip: Dacă ai un site lung (ex. pagină blog, shop), poziționează butonul cu bottom: 60px pentru a evita suprapunerea peste chat sau elemente flotante.