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

Cu toții am fost 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, anul este 2019, iar cele mai bune practici moderne de design web ne-au oferit soluția la această problemă comună UX: butonul lipicios î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 înapoi în sus

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?

*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 back-to-top 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.

Să începem! Voi parcurge fiecare pas al procesului și, de asemenea, puteți urmări acest Codepen de la propriul inginer front-end al lui Flywheel, Josh Masen.

Vedeți butonul Pen ES6 Derulare în sus 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="" id="js-top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Back to top</span>
</a>

Acesta va fi butonul tău lipicios din spate î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 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">Back to top</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 {
  transition: all .25s ease-in-out;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-flex;
  
 cursor: pointer;
 align-items: center;
 justify-content: center;
 margin: 0 3em 3em 0;
 border-radius: 50%;
 padding: .25em;
 width: 80px;
 height: 80px;
 background-color: #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ă.

  .show {
    visibility: visible;
    opacity: 1;
  }
  
  .hide {
    visibility: hidden;
    opacity: 0;
  }

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

svg {
 fill: #000;
 width: 24px;
 height: 12px;
}

&:hover {
 background-color: #E8E8E8;

 	svg {
	 fill: #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 meant only for screen readers.
.screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px);

	&:focus {
		display: block;
		top: 5px;
		left: 5px;
		z-index: 100000; // Above WP toolbar
		clip-path: none;
		background-color: #eee;
		padding: 15px 23px 14px;
		width: auto;
		height: auto;
		text-decoration: none;
		line-height: normal;
		color: #444;
		font-size: 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.

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

În continuare, 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 = () => {
  // Get the current scroll value
  let y = window.scrollY;
  
  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 0) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

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 = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    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.

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

Următorul: Descoperiți cele 19 plugin-uri WordPress pe care dezvoltatorii le plac

Descărcați această carte electronică pentru o listă cu cele mai recomandate plugin-uri pentru dezvoltatori! Am descoperit că toate aceste plugin-uri sunt ușor de utilizat, nu sunt prea grele de performanță pe site-ul dvs. și sunt de-a dreptul de încredere.

Asta e! Acum veți avea pe site-ul dvs. WordPress un buton lipicios back-to-top complet funcțional și personalizabil. Pentru a vedea întregul tutorial în acțiune, nu uitați să verificați acest Codepen de la propriul inginer front-end al lui Flywheel, Josh Masen!