Jak dodać przyklejony przycisk „Powrót do góry” do swojej witryny

Opublikowany: 2023-02-12

Wszyscy tam byliśmy. Znalazłeś fantastyczny przewodnik online, przewinąłeś wszystko na sam dół, a potem pomyślałeś: „Wow, chciałbym zobaczyć, co jeszcze ta strona ma do zaoferowania!”

Ale wtedy trzeba przewijać.

WSZYSTKO.

TO.

SPOSÓB.

DO.

TO.

SZCZYT.

A potem myślisz…. – Hmmm, nieważne. I zamknij stronę.

Jako projektant stron internetowych jest to prawie ostatnia rzecz, jakiej oczekujesz od kogoś, kto trafi na tworzoną przez Ciebie witrynę. Na szczęście najlepsze praktyki nowoczesnego projektowania stron internetowych dały nam rozwiązanie tego powszechnego problemu UX: lepkiego przycisku powrotu do góry.

Co to jest lepki przycisk „Powrót do góry”?

Przyklejony przycisk przewijania do góry, znany również jako przycisk przewijania do góry lub obraz do początku, jest pomocnym elementem nawigacyjnym, który pomaga użytkownikom wrócić na początek przeglądanej strony internetowej. Częstym wzorcem interfejsu użytkownika jest umieszczenie tego przycisku w prawym dolnym rogu ekranu, dzięki czemu jest on „lepki” w stałej pozycji, dzięki czemu jest zawsze dostępny, gdy użytkownik przewija stronę w dół.

Kwestie, które należy wziąć pod uwagę przed dodaniem przycisku Powrót do góry

Jak w przypadku każdego popularnego trendu projektowego, zachęcam do cofnięcia się o krok przed wdrożeniem go w witrynie i zadania sobie pytania: jeśli mam to zbudować, jakich wskazówek dotyczących przycisku wstecznego u góry muszę przestrzegać?

Oto kilka pytań, na które należy odpowiedzieć przed utworzeniem przycisku przewijania do góry:

  • Gdzie zostanie umieszczony?
  • Jak duży (lub mały) powinien być?
  • Jakimi wzorcami projektowymi powinieneś się kierować, aby pozostał na marce? (Pomyśl o kolorach, czcionkach, ikonach itp.)
  • Czy istnieje ryzyko zakrycia ważnych treści witryny, takich jak informacje na pasku bocznym?
  • Co dzieje się na urządzeniach mobilnych? Czy będzie responsywny?
  • Czy naprawdę tego potrzebujesz?*

*Uwaga: możesz argumentować, że dzisiejsi użytkownicy są uwarunkowani przewijaniem strony w dół (i kopią zapasową!), co wyeliminowałoby „potrzebę” przycisku powrotu do góry. Moja rada: przetestuj! Dodaj zdarzenie Google Analytics po kliknięciu lub użyj narzędzia mapy cieplnej, takiego jak Hotjar, aby zobaczyć, w jaki sposób odwiedzający Twoją witrynę wchodzą w interakcję ze stroną.

Najlepsza „najlepsza praktyka” do naśladowania to taka, która opiera się na danych z Twojej własnej witryny i użytkowników!

Jak dodać przyklejony przycisk powrotu do góry do swojej witryny WordPress

W tym samouczku pokażę, jak dodać dokładny przycisk powrotu do góry, którego używamy tutaj w Layout! Jedyna różnica polega na tym, że umieściliśmy nasz w lepkim nagłówku u góry ekranu, zamiast w prawym dolnym rogu. (Ale nie martw się, to ta sama koncepcja!)

Porada od specjalistów: chociaż ten samouczek nie jest zbyt zaawansowany, nadal polecam wypróbowanie go w witrynie testowej lub w środowisku lokalnym, więc nie ma absolutnie żadnego ryzyka dla działającej witryny. Jeśli chcesz szybko skonfigurować, wypróbuj Local, bezpłatną lokalną aplikację WordPress, która jest niezwykle łatwa w użyciu.

Lub obejrzyj ten samouczek wideo dotyczący dodawania samoprzylepnego przycisku powrotu do góry!

Zobacz przycisk przewijania do góry pióra ES6 autorstwa Josha Lawlera (@joshuamasen) w CodePen.

W tym przyklejonym samouczku dotyczącym przycisku „Powrót do góry” użyjemy trzech języków:

  • HTML dla znaczników, aby utworzyć przycisk
  • CSS, aby stylizować przycisk i dopasować go do Twojej marki
  • JavaScript, aby „działał” i definiował zachowanie przycisku

W kodzie HTML znajdziesz następujące wiersze:

 <a class="top-link hide" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><ścieżka d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Powrót do góry</span>
</a>

To będzie twój lepki przycisk powrotu do góry! Jak widać, dodaliśmy klasę CSS o nazwie .top-link i używamy prostego kodu JavaScript, aby „sprawić, by to działało”. Używamy również wbudowanego pliku SVG dla przycisku.

Oprócz pliku SVG do utworzenia przycisku można również użyć pliku obrazu lub ikony czcionki. Preferujemy jednak metodę SVG, ponieważ:

  1. Nie zostanie pikselowany przy różnych rozmiarach ekranu, jak obraz rastrowy.
  2. Pliki SVG są powszechnie obsługiwane we wszystkich przeglądarkach. (Tak, wrażenia użytkownika!)
  3. Łatwo jest stylizować za pomocą CSS, więc możesz naprawdę łatwo zmienić wszystko.
  4. Zajmuje tylko jedną linię kodu, dzięki czemu jest lekki i lepszy pod względem wydajności witryny.

Ostatnim naprawdę ważnym elementem, który znajdziesz w kodzie HTML, jest ta linia:

 <span class="screen-reader-text">Powrót do góry</span>

Ma to kluczowe znaczenie dla użytkowników korzystających z czytników ekranu i poprawi dostępność Twojej witryny WordPress. (Pomyśl o tym jak o tagu alt dla obrazu, ale o przycisku przewijania do góry!)

Porozmawiajmy teraz więcej o tej klasie CSS, .top-link . Używamy tego, aby nadać styl przyciskowi, i to tam zdefiniujesz cechy, takie jak jego rozmiar, ilość wypełnienia wokół niego, kolor itp.

 .górny link {
  przejście: wszystkie 0,25 s ułatwiające wyjście;
  pozycja: stała;
  dół: 0;
  po prawej: 0;
  wyświetlacz: inline-flex;
  
 kursor: wskaźnik;
 elementy wyrównania: środek;
 justify-content: środek;
 margines: 0 3em 3em 0;
 promień granicy: 50%;
 wyściółka: .25em;
 szerokość: 80px;
 wysokość: 80px;
 kolor tła: #F8F8F8;

Uwaga: Używamy Sass (języka arkuszy stylów), aby nieco szybciej pisać nasz CSS. Dowiedz się więcej o tym preprocesorze tutaj.

Kilka ważnych elementów z tego fragmentu: transition: all .25s ease-in-out ; kontroluje, jak „szybko” twój przycisk będzie pojawiał się lub znikał na ekranie, a position: fixed ; jest tym, co sprawia, że ​​przycisk „przykleja się” do wybranej lokalizacji.

Następnie zobaczysz reguły dla .show i .hide . Będziemy używać JavaScript do przełączania się między tymi klasami, aby poinformować przeglądarkę, kiedy przycisk powinien (lub nie powinien) pojawić się na stronie.

 .pokazywać {
    widoczność: widoczna;
    krycie: 1;
  }
  
  .ukrywać {
    widoczność: ukryta;
    krycie: 0;
  }

Zanim przejdziemy do kodu JavaScript, dodamy jeszcze kilka wierszy do kodu CSS.

 svg {
 wypełnij: #000;
 szerokość: 24px;
 wysokość: 12px;
}
&:unosić się {
 kolor tła: #E8E8E8;
 	svg {
	 wypełnij: #000000;
	}
}

Te klasy stylizują obraz SVG dla samej strzałki i informują przeglądarkę, jak wyświetlić przycisk, gdy użytkownik najedzie na niego kursorem.

Na koniec dodamy kod CSS, aby ukryć tekst „powrót na górę” dla czytników ekranu.

 // Tekst przeznaczony tylko dla czytników ekranu.
.screen-reader-text {
	pozycja: absolutna;
	ścieżka klipu: wstawka (50%);
	margines: -1px;
	granica: 0;
	wypełnienie: 0;
	szerokość: 1 piksel;
	wysokość: 1 piksel;
	przelew: ukryty;
	zawijanie słów: normalne !ważne;
	klip: prostokąt(1px, 1px, 1px, 1px);
	&:centrum {
		Blok wyświetlacza;
		góra: 5 pikseli;
		lewy: 5px;
		indeks z: 100000; // Powyżej paska narzędzi WP
		ścieżka klipu: brak;
		kolor tła: #eee;
		dopełnienie: 15px 23px 14px;
		szerokość: automatyczna;
		wysokość: automatyczna;
		dekoracja tekstu: brak;
		wysokość linii: normalna;
		kolor: #444;
		rozmiar czcionki: 1em;
		klip: auto !ważne;
	}
}

Teraz przejdź do JavaScript! Zrobimy to bez ładowania jQuery, co pomoże zachować lekkość kodu i szybkie ładowanie.

Pierwsza zmienna pomoże przeglądarce znaleźć przycisk.

 // Ustaw zmienną dla naszego elementu przycisku.
const scrollToTopButton = document.getElementById('js-top');

Następnie utworzymy funkcję, która pokaże przycisk przewijania do góry, jeśli użytkownik przewinie poza wysokość początkowego okna.

 const scrollFunc = () => {
  // Pobierz bieżącą wartość przewijania
  niech y = okno.przewińY;
  
  // Jeśli wartość przewijania jest większa niż wysokość okna, dodajmy klasę do przycisku przewijania do góry, aby to pokazać!
  jeśli (y > 0) {
    scrollToTopButton.className = "pokaż górny link";
  } w przeciwnym razie {
    scrollToTopButton.className = "ukryj górny link";
  }
};

Dodamy również detektor zdarzeń, który będzie obserwował, jak użytkownik przewija stronę (abyśmy wiedzieli, gdzie się znajduje na stronie).

 window.addEventListener("przewiń", scrollFunc);

Prawie skończone! Następnie musimy zdefiniować funkcję, która sprawi, że przycisk faktycznie przeniesie użytkownika z powrotem na górę strony. Aby to zrobić, utworzymy zmienną dla liczby pikseli, w których znajdujemy się od góry strony. Jeśli ta liczba jest większa niż 0, funkcja ustawi ją z powrotem na 0, przenosząc nas na szczyt!

Dodamy tu również małą animację, aby skok nie był zbyt nagły.

 const scrollToTop = () => {
  // Ustawmy zmienną określającą liczbę pikseli, w których jesteśmy od góry dokumentu.
  const c = document.documentElement.scrollTop || dokument.body.scrollTop;
  
  // Jeśli ta liczba jest większa niż 0, przewiniemy z powrotem do 0, czyli do początku dokumentu.
  // Będziemy również animować ten zwój za pomocą requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  jeśli (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo pobiera współrzędne x i ay.
    // Zwiększ wartość „10”, aby uzyskać płynniejsze/wolniejsze przewijanie!
    okno.scrollTo(0, c - c / 10);
  }
};

Na koniec musimy tylko powiedzieć stronie, aby uruchamiała tę funkcję, gdy ktoś kliknie nasz przyklejony przycisk powrotu do początku.

 // Po kliknięciu przycisku uruchom powyższą funkcję ScrolltoTop!
scrollToTopButton.onclick = funkcja(e) {
  e.preventDefault();
  przewiń na górę();
}

Otóż ​​to! Będziesz mieć teraz w pełni funkcjonalny i konfigurowalny przycisk „Powrót do góry” w swojej witrynie WordPress.