Scroll to top button ~ Blogul lui Petre VitanBlogul lui Petre-Vitan

Widget Buton Inteligent Scroll to Top (Centrare Perfectă) Realizat de petre-vitan

Previzualizare aspect buton (Săgeată centrată perfect în mijloc):

Stil Buton local

Codul sursă complet de copiat pentru Blogspot:

<!-- ======================================================= -->
<!-- BUTON INTELIGENT SCROLL TO TOP CU URCARE FLUIDĂ          -->
<!-- REALIZAT DE PETRE-VITAN                                 -->
<!-- ======================================================= -->
<button id="pvScrollToTopBtn" title="Mergi sus">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
    <polyline points="18 15 12 9 6 15"></polyline>
  </svg>
</button>

<style>
#pvScrollToTopBtn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 999999;
  width: 46px;
  height: 46px;
  border: none;
  outline: none;
  background-color: #00aa66; /* Culoare fundal buton */
  color: white;              /* Culoare săgeată */
  cursor: pointer;
  padding: 0;
  border-radius: 50%;        /* Formă perfect rotundă */
  
  /* Aliniere flexbox avansată pentru centrare perfectă */
  display: flex;
  align-items: center;
  justify-content: center;
  
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;                /* Ascuns implicit la început */
  visibility: hidden;
  transition: all 0.4s ease;
}

#pvScrollToTopBtn:hover {
  background-color: #00ff99; /* Culoare la trecerea cu mouse-ul */
  color: #111;
  transform: translateY(-4px); /* Efect fin de ridicare */
  box-shadow: 0 6px 15px rgba(0, 255, 153, 0.4);
}

/* Adaptare design pe ecrane de mobile */
@media screen and (max-width: 768px) {
  #pvScrollToTopBtn {
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
  }
  #pvScrollToTopBtn svg {
    width: 18px;
    height: 18px;
  }
}
</style>

<script type='text/javascript'>
//<![CDATA[
(function() {
  const btn = document.getElementById("pvScrollToTopBtn");
  if (!btn) return;

  // Monitorizăm derularea paginii
  window.addEventListener("scroll", function() {
    // Dacă pagina este coborâtă mai mult de 300px, afișăm butonul
    if (window.pageYOffset > 300) {
      btn.style.opacity = "1";
      btn.style.visibility = "visible";
    } else {
      btn.style.opacity = "0";
      btn.style.visibility = "hidden";
    }
  });

  // Logica de urcare lină (Smooth Scroll) la apăsarea butonului
  btn.addEventListener("click", function() {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  });
})();
//]]>
</script>

🛠️ Cum se instalează butonul Scroll To Top pe Blogspot:

Copiați scriptul dând clic pe butonul Copiază Codul situat direct deasupra casetei de text.
Accesați panoul administrativ Blogger.
În meniul din stânga, faceți clic pe opțiunea Temă (Theme).
Apăsați pe triunghiul mic de lângă butonul portocaliu „Personalizează” și selectați Editați HTML (Edit HTML).
Faceți un clic în interiorul editorului de cod și apăsați scurtătura Ctrl + F ca să deschideți bara de căutare.
Căutați tag-ul de închidere structurală </body>.
Lipiți codul copiat exact deasupra / înainte de această etichetă </body>.
Salvați tema apăsând pe pictograma de dischetă (Salvare) din colțul din dreapta sus.

Scroll to top button

Niciun comentariu:

Trimiteți un comentariu

Articole aleatorii

De unde avem vizite?

Arhivă blog

Bine de stiut

Meteo