Jak dodać przyklejony przycisk „od góry do góry” na swojej stronie?

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

Ale potem musisz przewijać.

WSZYSTKO.

TEN.

DROGA.

DO.

TEN.

TOP.

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

Jako projektant stron internetowych jest to ostatnia rzecz, jakiej oczekujesz od kogoś, kto trafi na tworzoną przez Ciebie witrynę. Na szczęście jest rok 2019, a nowoczesne najlepsze praktyki projektowania stron internetowych dały nam rozwiązanie tego powszechnego problemu UX: przyklejony przycisk „od góry do góry”.

Co to jest przyklejony przycisk „od góry do góry”?

Nazywany również przyciskiem przewijania do góry lub obrazem idź do góry, przyklejony przycisk powrotu do góry jest pomocnym elementem nawigacji, który pomaga użytkownikom wrócić do góry oglądanej strony internetowej. Typowym wzorem interfejsu użytkownika jest umieszczenie tego przycisku w prawym dolnym rogu ekranu, dzięki czemu jest „przyklejony” w stałej pozycji, dzięki czemu jest zawsze dostępny, gdy użytkownik przewija stronę w dół.

Rzeczy do rozważenia przed dodaniem przycisku od początku do góry

Jak w przypadku każdego popularnego trendu projektowego, zachęcam Cię do zrobienia kroku wstecz przed wdrożeniem go w witrynie i zadania sobie pytania: Jeśli mam to stworzyć, jakich wskazówek dotyczących przycisku „wstecz-góra” muszę przestrzegać?

*Uwaga: możesz argumentować, że dzisiejsi użytkownicy są uwarunkowani przewijaniem strony w dół (i tworzeniem kopii zapasowej!), co wyeliminowałoby „potrzebę” przycisku „od góry do góry”. Moja rada: Przetestuj to! Dodaj zdarzenie Google Analytics po kliknięciu lub użyj narzędzia mapy termicznej, takiego jak Hotjar, aby zobaczyć, jak użytkownicy Twojej witryny wchodzą na stronę.

Najlepszą „najlepszą praktyką” do naśladowania jest ta oparta na danych z Twojej własnej witryny i użytkowników!

Jak dodać przyklejony przycisk „od góry do góry” do swojej witryny WordPress?

W tym samouczku pokażę, jak dodać dokładnie przycisk powrotu do góry, którego używamy tutaj w Layout! Jedyną różnicą jest to, ż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 na stronie testowej lub w środowisku lokalnym, więc nie ma żadnego ryzyka dla Twojej 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.

Zacznijmy! Przejdę przez każdy etap tego procesu, możesz także śledzić ten Codepen od inżyniera front-endu firmy Flywheel, Josha Masena.

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

W tym samouczku dotyczącym przyklejonych przycisków od początku do końca użyjemy trzech języków:

• HTML dla znaczników do utworzenia przycisku
• CSS do stylizacji przycisku i dopasowania go do Twojej marki
• JavaScript, aby „działał” i zdefiniował zachowanie przycisku

W kodzie HTML znajdziesz następujące wiersze:

<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>

To będzie twój lepki przycisk „od góry do góry”! Widać, że dodaliśmy klasę CSS o nazwie .top-link i używamy prostego JavaScriptu, aby „sprawić, żeby to działało”. Używamy również wbudowanego SVG dla przycisku.

Oprócz SVG możesz również użyć pliku obrazu lub ikony czcionki, aby utworzyć przycisk. Preferujemy jednak metodę SVG, ponieważ:

1. Nie będzie pikselowany na różnych rozmiarach ekranu, tak jak zrobiłby to obraz rastrowy.
2. Pliki SVG są powszechnie obsługiwane w różnych przeglądarkach. (Tak, wrażenia użytkownika!)
3. Łatwo jest stylizować za pomocą CSS, więc możesz wszystko w nim zmienić naprawdę łatwo.
4. Zajmuje tylko jeden wiersz kodu, dzięki czemu jest lekki i lepszy dla wydajności witryny.

Ostatnim naprawdę ważnym fragmentem, jaki znajdziesz w kodzie HTML, jest ten wiersz:

<span class="screen-reader-text">Back to top</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 tutaj definiujesz cechy, takie jak jego rozmiar, wielkość wypełnienia, kolor itp.

.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;

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

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

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

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

Zanim przejdziemy do JavaScriptu, dodamy jeszcze tylko kilka linijek do CSS.

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

&:hover {
 background-color: #E8E8E8;

 	svg {
	 fill: #000000;
	}
}

Te klasy będą stylizować 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 „od początku do góry” dla czytników ekranu.

// 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;
	}
}

Teraz przejdźmy do JavaScriptu! Zrobimy to bez ładowania jQuery, dzięki czemu Twój kod będzie lekki i szybki do załadowania.

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

// Set a variable for our button element.
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 = () => {
  // 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";
  }
};

Dodamy również detektor zdarzeń, który będzie obserwował, jak użytkownik przewija (więc wiemy, w którym miejscu strony się znajduje).

window.addEventListener("scroll", 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ą określającą liczbę pikseli, z których pochodzimy od góry strony. Jeśli ta liczba jest większa niż 0, funkcja ustawi ją z powrotem na 0, przenosząc nas na sam szczyt!

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

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);
  }
};

Na koniec musimy tylko powiedzieć stronie, aby uruchomiła tę funkcję, gdy ktoś kliknie nasz przyklejony przycisk „od góry do góry”.

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

Dalej: Odkryj 19, które twórcy wtyczek WordPress uwielbiają

Pobierz ten ebook, aby zobaczyć listę naszych najbardziej polecanych wtyczek dla programistów! Odkryliśmy, że wszystkie te wtyczki są proste w użyciu, nie mają zbyt dużej wydajności w Twojej witrynie i są po prostu niezawodne.

Otóż ​​to! Będziesz mieć teraz w pełni funkcjonalny i konfigurowalny przyklejony przycisk od początku do końca w swojej witrynie WordPress. Aby zobaczyć cały samouczek w akcji, pamiętaj, aby sprawdzić ten Codepen od inżyniera front-endu firmy Flywheel, Josha Masena!