Cum să adăugați un buton lipicios înapoi în sus pe site-ul dvs. web

Publicat: 2023-02-12

Am fost cu toții acolo. Ați găsit un ghid online fantastic, ați derulat până la capăt și apoi ați gândit: „Uau, mi-ar plăcea să văd ce mai are de oferit acest site!”

Dar apoi trebuie să defilezi.

TOATE.

THE.

CALE.

LA.

THE.

TOP.

Și atunci te gândești... „Hmmm, nu contează.” Și închideți pagina.

În calitate de web designer, acesta este aproape ultimul lucru pe care vrei să-l facă cineva când ajunge pe un site pe care îl construiești. Din fericire, cele mai bune practici moderne de design web ne-au oferit soluția la această problemă comună UX: butonul lipicios de înapoi în sus.

Ce este un buton lipicios înapoi în sus?

Cunoscut și sub numele de buton de derulare în sus sau imagine de sus, butonul lipicios înapoi în sus este un element de navigare util care îi ajută pe utilizatori să revină în partea de sus a paginii web pe care o vizualizează. Un model obișnuit de interfață de utilizare este plasarea acestui buton în colțul din dreapta jos al ecranului, făcându-l „lipicios” printr-o poziție fixă, astfel încât să fie întotdeauna accesibil pe măsură ce utilizatorul derulează în jos pe pagină.

Lucruri de luat în considerare înainte de a adăuga un buton Back-to-Top

Ca orice tendință populară de design, vă încurajez să faceți un pas înapoi înainte de a-l implementa pe site-ul dvs. pentru a vă întreba: Dacă voi construi acest lucru, ce îndrumări pentru butoanele din spate trebuie să urmez?

Iată câteva întrebări la care trebuie să răspundeți înainte de a vă crea butonul de derulare în sus:

  • Unde va fi amplasat?
  • Cât de mare (sau mic) ar trebui să fie?
  • Ce modele de design ar trebui să urmați pentru a rămâne pe brand? (Gândiți-vă la culori, fonturi, pictograme etc.)
  • Există riscul de a acoperi conținutul important al site-ului, cum ar fi informații dintr-o bară laterală?
  • Ce se întâmplă pe dispozitivele mobile? Va fi receptiv?
  • Chiar ai nevoie de el?*

*Notă: ați putea argumenta că utilizatorii de astăzi sunt condiționați să deruleze în jos (și să susțină înapoi!) pe o pagină, ceea ce ar elimina „nevoia” pentru un buton de sus. Sfatul meu: Testează-l! Adăugați un eveniment Google Analytics la clic sau utilizați un instrument de hărți termice precum Hotjar pentru a vedea cum interacționează vizitatorii site-ului dvs. cu pagina.

Cea mai bună „cele mai bune practici” de urmat este una bazată pe datele de pe propriul site și utilizatori!

Cum să adăugați un buton lipicios înapoi în sus pe site-ul dvs. WordPress

În acest tutorial, vă voi arăta cum să adăugați butonul exact înapoi în sus pe care îl folosim aici în Layout! Singura diferență este că am plasat-o pe a noastră într-un antet lipicios în partea de sus a ecranului, în loc de colțul din dreapta jos. (Dar nu vă faceți griji, este același concept!)

Sfat pro: deși acest tutorial nu este prea avansat, recomand totuși să îl încercați pe un site de pregătire sau într-un mediu local, deci nu există absolut niciun risc pentru site-ul dvs. live. Dacă trebuie să configurați una rapid, consultați Local, o aplicație locală gratuită pentru WordPress, care este incredibil de ușor de utilizat.

Sau, consultați acest tutorial video de adăugare a unui buton lipicios înapoi în sus!

Vedeți butonul de derulare în sus al Pen ES6 de Josh Lawler (@joshuamasen) pe CodePen.

Pentru acest tutorial lipicios cu butonul înapoi în sus, vom folosi trei limbi:

  • HTML pentru marcaj pentru a crea butonul
  • CSS pentru a stila butonul și a-l face să se potrivească cu marca dvs
  • JavaScript pentru ca acesta să „funcționeze” și să definească comportamentele butonului

În HTML, veți găsi următoarele rânduri:

 <a class="top-link hide" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Înapoi la început</span>
</a>

Acesta va fi butonul tău lipicios înapoi în sus! Puteți vedea că am adăugat o clasă CSS numită .top-link și că folosim ceva JavaScript simplu pentru a „o face să funcționeze”. De asemenea, folosim un SVG în linie pentru buton.

Pe lângă un SVG, puteți utiliza și un fișier imagine sau o pictogramă de font pentru a crea butonul. Preferăm metoda SVG, totuși, deoarece:

  1. Nu va fi pixelat la diferite dimensiuni de ecran, așa cum ar face o imagine raster.
  2. SVG-urile sunt acceptate universal în toate browserele. (Da, experiența utilizatorului!)
  3. Este ușor de stilat cu CSS, așa că puteți schimba totul cu adevărat ușor.
  4. Este nevoie doar de o singură linie de cod, ceea ce îl face ușor și mai bun pentru performanța site-ului.

Ultima piesă cu adevărat importantă pe care o veți găsi în HTML este această linie:

 <span class="screen-reader-text">Înapoi la început</span>

Acest lucru este esențial pentru utilizatorii care operează cu cititoare de ecran și va îmbunătăți accesibilitatea site-ului dvs. WordPress. (Gândiți-vă la asta ca la o etichetă alternativă pentru o imagine, dar pentru butonul de derulare în sus!)

Acum să vorbim mai multe despre acea clasă CSS, .top-link . Îl folosim pentru a stiliza butonul și aici veți defini calități precum cât de mare va fi, cât de multă căptușeală ar trebui să fie în jurul lui, culoarea etc.

 .top-link {
  tranziție: toate .25s ease-in-out;
  poziție: fixă;
  jos: 0;
  dreapta: 0;
  display: inline-flex;
  
 cursor: pointer;
 alinierea elementelor: centru;
 justificare-conținut: centru;
 marja: 0 3em 3em 0;
 raza-limită: 50%;
 umplutura: .25em;
 latime: 80px;
 inaltime: 80px;
 culoare de fundal: #F8F8F8;

Notă: folosim Sass (un limbaj pentru foi de stil), pentru a scrie CSS-ul nostru puțin mai rapid. Aflați mai multe despre acest preprocesor aici.

Câteva piese importante din acest fragment: transition: all .25s ease-in-out ; controlează cât de „rapid” va apărea sau va dispărea butonul dvs. pe ecran și position: fixed ; este ceea ce face ca butonul să se „lipească” de locația pe care o doriți.

În continuare, veți vedea regulile pentru .show și .hide . Vom folosi JavaScript pentru a comuta între aceste clase pentru a spune browserului când trebuie (sau nu) să apară butonul pe pagină.

 .spectacol {
    vizibilitate: vizibil;
    opacitate: 1;
  }
  
  .hide {
    vizibilitate: ascuns;
    opacitate: 0;
  }

Înainte de a intra în JavaScript, mai sunt doar câteva rânduri pe care le vom adăuga la CSS.

 svg {
 umplere: #000;
 latime: 24px;
 înălțime: 12px;
}
&:hover {
 culoare de fundal: #E8E8E8;
 	svg {
	 umplere: #000000;
	}
}

Aceste clase vor stiliza imaginea SVG pentru săgeata în sine și vor spune browserului cum să afișeze butonul atunci când un utilizator trece cu mouse-ul peste el.

În cele din urmă, vom adăuga câteva CSS pentru a ascunde textul care spune „înapoi în sus” pentru cititoarele de ecran.

 // Text destinat doar cititorilor de ecran.
.screen-reader-text {
	poziție: absolută;
	clip-path: insert (50%);
	marjă: -1px;
	chenar: 0;
	umplutură: 0;
	latime: 1px;
	înălțime: 1px;
	preaplin: ascuns;
	word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px);
	&:focus {
		afisare: bloc;
		sus: 5px;
		stânga: 5px;
		indicele z: 100000; // Deasupra barei de instrumente WP
		clip-path: niciunul;
		culoare de fundal: #eee;
		umplutură: 15px 23px 14px;
		latime: auto;
		inaltime: auto;
		text-decor: niciuna;
		înălțimea liniei: normală;
		culoare: #444;
		dimensiunea fontului: 1em;
		clip: auto !important;
	}
}

Acum, la JavaScript! Vom face acest lucru fără a încărca jQuery, ceea ce vă va ajuta să vă mențineți codul ușor și rapid de încărcat.

Prima variabilă va ajuta browserul să găsească butonul.

 // Setați o variabilă pentru elementul nostru buton.
const scrollToTopButton = document.getElementById('js-top');

Apoi, vom crea o funcție care afișează butonul de derulare în sus dacă utilizatorul derulează dincolo de înălțimea ferestrei inițiale.

 const scrollFunc = () => {
  // Obține valoarea curentă de defilare
  lasă y = fereastră.scrollY;
  
  // Dacă valoarea derulării este mai mare decât înălțimea ferestrei, să adăugăm o clasă la butonul de derulare în sus pentru a o afișa!
  dacă (y > 0) {
    scrollToTopButton.className = "afișare top-link";
  } altfel {
    scrollToTopButton.className = "ascundere link-ul de sus";
  }
};

Vom adăuga, de asemenea, un ascultător de evenimente, care va urmări pe măsură ce utilizatorul derulează (ca să știm unde se află pe pagină).

 window.addEventListener("scroll", scrollFunc);

Aproape gata! În continuare, trebuie să definim funcția care face ca butonul să ducă utilizatorul înapoi în partea de sus a paginii. Pentru a face asta, vom crea o variabilă pentru numărul de pixeli din partea de sus a paginii. Dacă acel număr este mai mare decât 0, funcția îl va seta înapoi la 0, ducându-ne în vârf!

Vom adăuga și o mică animație aici, astfel încât saltul să nu fie prea brusc.

 const scrollToTop = () => {
  // Să setăm o variabilă pentru numărul de pixeli din partea de sus a documentului.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // Dacă acel număr este mai mare decât 0, vom derula înapoi la 0 sau la partea de sus a documentului.
  // Vom anima și acel defilare cu requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  dacă (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo ia o coordonată x și ay.
    // Mărește valoarea „10” pentru a obține un defilare mai fin/mai lent!
    window.scrollTo(0, c - c / 10);
  }
};

Nu în ultimul rând, trebuie doar să spunem paginii să ruleze acea funcție atunci când cineva face clic pe butonul nostru lipicios înapoi în sus.

 // Când faceți clic pe butonul, rulați funcția noastră ScrolltoTop de mai sus!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

Asta este! Acum veți avea pe site-ul dvs. WordPress un buton lipicios back-to-top complet funcțional și personalizabil.