Tworzenie przycisku “Powrót do góry” za pomocą CSS i jQuery

• CSS style dła przycisku Powrót do góry
• Dodawanie ikony
• Dodawanie funkcjonalności za pomocą jQuery
• Jak zrobić aby przycisk Powrót do góry pojawiał się i znikał
• Przewijanie do góry
• FAQ

Przycisk Powrót do góry - to jeden z najczźściej wykorzystywanych na stronach elementów. Ta strzałka pojawia się w prawym dolnym rogu strony po rozpoczęciu przewijania. Po kliknięciu powoduje powrót do początku strony.

Jeśli chciałbyś dodać przycisk Powrót do góry podczas tworzenia strony lub chciałbyś dowiedzieć się jak stworzyć ten porzycisk samodzielnie - zapraszam do lektury!

Powrót do przyszłości góry

Nasz kod będzie składał się z dwóch części, stylu CSS i małego skryptu jQuery. Zacznijmy od CSS.

CSS style dła przycisku Powrót do góry

Zaczynamy od tworzenia stylów i znaczników dla naszego przycisku. Tak wygląda część HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<a id="button"></a>

Przycisk będzie składał się tylko z jednej kotwicy z identyfikatorem button. Zamieszczamy również link do biblioteki FontAwesome, abyśmy mogli użyć ikony dla naszego przycisku.

Początkowe style przycisku będą wyglądali tak:

#button {
  display: inline-block;
  background-color: #FF9800;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  margin: 30px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s;
  z-index: 1000;1
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}

Ponieważ przycisk jest elementem zakotwiczającym, a domyślnie kotwice są elementami śródliniowymi, musimy zmienić właściwość wyświetlania na wbudowany blok, abyśmy mogli przypisać do niego wymiary.

Zróbmy z niego kwadratowy przycisk 50*50px z zaokrąglonymi kątami 4px. Ustawiamy dla niego jasny pomarańczowy kolor i margines 30 px po każdej stronie.

Ustalona pozycja zawsze będzie umożliwiała naszemu przyciskowi pozostanie w tym samym miejscu podczas przewijania strony, a z-index z dużą liczbą zapewna, że przycisk zawsze będzie pokrywał inne elementy strony.

Po najechaniu kursorem na przycisk kursor zmieni się w wskaźnik, a tło stanie się ciemnoszare. Aby przejście było płynne, przypisujemy wartość szybkości przejścia 0,3 sekundy do właściwości background-color. Ponadto, gdy klikniemy przycisk, kolor tła również się zmieni i stanie się nieco jaśniejszy.

Dodawanie ikony

Teraz nasz przycisk jest pusty, więc dodajmy do niego ikonę. Robimy to przez dodanie pseudo-elementu ::after :

#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

Wybieramy ikonę z najpopularniejszej biblioteki fontów FontAwesome. Postanowiłam wybrać ikonę "Chevron Up".

Aby wyświetlić ją w pseudoelementie, ustaw font-family na FontAwesome i przypisz wartość Unicode ikony do właściwości content.

Upewnij się również, że wysokość linii jest równa wysokości twojej ikony, jeśli chcesz, aby ona była wyśrodkowana w poziomie.

Dodawanie funkcjonalności za pomocą jQuery

W tej podsekcji pokażę Ci, jak sprawić, aby przycisk działał według Twoich wymagań. Najłatwiejszym sposobem na osiągnięcia tego celu jest użycie biblioteki jQuery w JavaScript. Najpierw musimy dodać jQuery do znaczników HTML naszego kodu. Dodaj tą linię kodu tuż przed zamykającym tagiem body.

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>

Teraz możemy napisać nasz skrypt za pomocą składni jQuery. Dodaj następujący skrypt po linii jQuery:

<script>

jQuery(document).ready(function() {
  
  var btn = $('#button');

  $(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }
  });

  btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, '300');
  });

});

</script>

Przyjrzyjmy się bliżej temu skryptowi.

Zauważysz pierwszy wiersz kodu:

jQuery(document).ready(function() {

Zasadniczo mówiąc, uruchom kod wewnątrz tej funkcji tylko wtedy, gdy dokument jest w pełni załadowany. To świetny sposób, aby zapobiec błędom, na wypadek gdyby kod JavaScript chciał wprowadzić zmiany w częściach strony, które nie były w pełni załadowane w przeglądarce.

Kod uruchamiany po pełnym załadowaniu dokumentu składa się z dwóch głównych fragmentów kodu, z których każdy wykonuje swoją funkcję.

Pierwsza część skryptu powoduje, że przycisk Powrót do góry pojawia się i znika po przewinięciu strony do określonego punktu. Druga część sprawia, że strona przewija się do góry po kliknięciu przycisku. Przyjrzyjmy się szczegółowo każdej z nich.

Jak zrobić aby przycisk Powrót do góry pojawiał się i znikał

Ten kod odpowiada za tą akcję:

 var btn = $('#button');

  $(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }
  });

Najpierw deklarujemy zmienną btn i kierujemy ją do elementu z identyfikatorem  button, dzięki czemu łatwiej nam będzie się do niego odnieść później w kodzie. Pomaga to również JavaScriptowi w szybszym wykonywaniu obliczeń. Kiedy przechowujemy element w zmiennej, JavaScript nie będzie musiał przeszukiwać całej strony za każdym razem, gdy będziemy potrzebowali jego ponownie w naszym kodzie.

.scroll()

jQuery ma przydatną funkcję .scroll(). Ona wiąże kawałek kodu, który będzie wykonywany za każdym razem, gdy wydarzy się zdarzenie przewijania na stronie. Ma jeden parametr, który jest funkcją wykonywaną za każdym razem, gdy robisz przewijanie strony. Chociaż można go zastosować do dowolnego przewijalnego elementu, takiego jak ramki i elementy z właściwością przepełnienia ustawioną do przewijania, zazwyczaj stosujemy go do elementu okna, ponieważ tam właśnie przewijanie występuje w większości przypadków, w tym w naszym przykładzie.

$(window).scroll(function() {

Wewnątrz funkcji umieszczamy tą instrukcję if/else:

    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }

Próbujemy tutaj sprawdzić pionową pozycję paska przewijania i sprawić, by nasz przycisk pojawił się, gdy znajdzie się poniżej pewnego punktu, i zniknął, gdy jest powyżej tego punktu.

Aby uzyskać aktualną pozycję paska przewijania, użyjemy wbudowanej metody jQuery  .scrollTop(). Nie przyjmuje żadnych argumentów i po prostu zwraca liczbę pikseli, które są ukryte nad przewijalnym obszarem.

Za każdym razem, gdy przwiajmy stronę, JavaScript sprawdza, ile pikseli jest ukrytych i porównuje je z ustawioną liczbą. W naszym przypadku ustawiłam tą liczbę na 300, ale można ją zmienić w razie potrzeby.

Jeśli przekroczymy wartość 300 pikseli, dodamy do naszego elementu przycisku klasę   show, która sprawi, że on pojawi się . Jeśli liczba będzie mniejsza niż 300, usuwamy tą klasę. Dodawanie i usuwanie klas jest kolejnym powodem popularności jQuery. Możemy to zrobić za pomocą dwóch prostych metod addClass() i removeClass().

Jednak nie mamy jeszcze klasy show w naszym CSS, dodajmy ją:

    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }

Domyślnie nasz przycisk jest ukryty, więc będziemy musieli dodać kilku dodatkowych reguł do elementu #button:

#button {
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
}1

Aby przejście było płynne, dodałam dwie dodatkowe wartości do atrybutu przejścia, a ukrycie i widoczność ustawiłam  na 0,5 sekundy.

Przewijanie do góry

Druga część skryptu umożliwia przewijanie do górnej części strony po kliknięciu przycisku.

  btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, '300');
  });1

Pierwsza metoda jQuery, którą tu widzimy, to on(). Jej pierwszym parametrem jest "kliknięcie" zdarzenia JavaScript, która pojawia się za każdym razem, gdy klikniemy myszą w przeglądarce. Drugi parametr to funkcja modułu obsługi, która zaczyna działać wraz po wystąpieniu zdarzenia.

Funkcja handlera przyjmuje parametr zdarzenia. Potrzebujemy parametru zdarzenia, aby przekazać go do funkcji i użyć dla metody preventDefault().

Metoda e.preventDefault() pzapobiega domyślnej akcji zdarzenia. W naszym przypadku nie ma to znaczenia, ponieważ nasz element zakotwiczający nie ma atrybutu href i nie przeniósłby nas do nowej strony, ale zawsze lepiej jest dokładnie sprawdzić.

.animate()

Metoda jQuery .animate() - to główny element.

    $('html, body').animate({scrollTop:0}, '300');

Pierwszy parametr metody .animate() to lista właściwości, które powinniśmy animować. Nasza łaściwość jest nazywana scrollTop, i ma wartość 0. Typ tego parametru jest prostym obiektem, więc musimy użyć nawiasów klamrowych i zapisać nasze wartości, używając składni pary klucz/wartość.

Drugi parametr to szybkość animacji. Jest mierzona w milisekundach - im wyższa będfzie liczba, tym wolniejsza animacja. Domyślna szybkość jest ustawiona na 400, ale zmieniłam ją na 300.

Na koniec stosujemy metodę animacji do elementów HTML i body elementów na naszej stronie.

Teraz za każdym razem, gdy klikniemy przycisk Powrót do góry, zostaniemy przeniesieni do górnej części strony.

FAQ

Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: Creating a Back to Top Button with CSS & jQuery

* * *

Przycisk "Powrót do góry" to świetny sposób na wzmocnienie użyteczności strony, który na pewno docenią wszyscy jej odwiedzające. Mam nadzieję, że ten tutorial pomógł Ci poszerzyć swoją wiedzę w zakresie CSS i JavaScript, zapewniając pewne momenty , które mogą stać się przydatne dla początkujących projektantów stron internetowych i programistów.

Czytaj także

Komendy CSS, które rozśmieszą Cię do łez

5 powodów, dla których warto nauczyć się HTML i CSS

Darmowe efekty CSS3 do kopiowania i wklejania