Przejdź do klawisza w górę. Utwórz przycisk „Powrót do góry” lub przycisk Przewiń do góry za pomocą jQuery

| 09.10.2014

Przycisk „Powrót do góry” jest bardzo często używany w witrynach zawierających wiele długich stron. Kiedy użytkownik przegląda duży artykuł, galerię zdjęć, aktualności w sieci społecznościowe itd., chce wrócić na górę strony, albo przewija długo (co nie jest zbyt wygodne), albo naciska klawisz Home na klawiaturze, albo używa specjalnego przycisku „Powrót na górę”.

Zaletą tego przycisku jest to, że może on działać na tabletach i smartfonach oraz w każdym innym przypadku, gdy nie masz pod ręką klawiatury. Ponadto nie wszyscy użytkownicy mogą o tym wiedzieć przydatna funkcja Klawisze Home i przycisk na stronie są zawsze widoczne, od razu widać do czego służą. Drugim plusem jest to, że przycisk ten można ulepszyć i tak sprawić, aby odsyłał użytkownika do miejsca na stronie, z którego trafił na górę. To właśnie tę wersję przycisku będziemy dzisiaj tworzyć. Możesz obejrzeć demo, a także pobrać przykładowy plik na swój komputer.

Część CSS zajmująca się stylizacją przycisków wygląda następująco:

InTop ( pozycja: stała; lewa: 0px; góra: 0px; szerokość: 20%; wysokość: 100%; krycie: 0,5; filtr: alfa(opacity=50); kursor: wskaźnik; wyświetlacz: brak; ) .inTop:hover ( kolor tła: #f5f4f4; krycie: 1; filtr: alfa(opacity=100); ) .inTop span (wyświetlanie: blok; szerokość: 100%; górny margines: 20 pikseli; wyrównanie tekstu: do środka; rozmiar czcionki : 110%; kolor: #52466a; rodzina czcionek: Georgia, Times; grubość czcionki: pogrubiona)

Następnym krokiem jest kod JavaScript. Dla wygody wewnątrz dodano komentarze z objaśnieniami:

// deklaracja zmiennych: var BottomPosition = 0; // pozycja strony var BottomFlag = false; // flaga wyświetlająca przycisk PRZEJDŹ NA DÓŁ var AnimateFlag = false;// Flaga wyświetlająca animację $(document).ready(function() ( $(.inTop").click(function() ( // kliknij przycisk PRZEJDŹ NA GÓRĘ/PRZEJDŹ NA DÓŁ AnimateFlag = true; // animacja jest wykonywana if(BottomFlag) ( // jeśli naciśnięty zostanie przycisk PRZEJDŹ NA DÓŁ... $("body,html").animate(("scrollTop ":BottomPosition), 200, funkcja() ( // ...powraca do żądanego miejsca na stronie z szybkością 200 AnimateFlag = false; // animacja została zakończona )); // zamień przycisk $(" .inTop span").html („PRZEJDŹ DO GÓRY”); ) else ( // jeśli naciśnięty zostanie przycisk PRZEJDŹ DO GÓRY... $("body,html").animate(("scrollTop":0), 200, funkcja() ( // ..powraca na górę strony z szybkością 200 AnimateFlag = false )); (.inTop span").html("GO TO BOTTOM"); // sprawdź kiedy przewijanie strony: $(window).scroll(function(event) ( var countScroll = $(window).scrollTop ();

));

Krok 3. HTML

Pozostało tylko utworzyć przycisk w HTML:

PRZEJDŹ DO GÓRY

To wszystko, prosty, ale bardzo wygodny przycisk Powrót do góry dla witryny z funkcją powrotu jest gotowy. Możesz samodzielnie dostosować jego styl, który będzie pasował do Twojej witryny. Życzymy twórczych sukcesów i zadowolonych użytkowników! W witrynach zawierających dużo treści (na przykład blogach) wystarczy użyć przycisku „Powrót do góry”. W końcu użytkownik, który przeczytał długi artykuł, może być zmuszony do powrotu

Dlatego dla ułatwienia nawigacji w serwisie zastosowano przycisk przewijania strony. Możesz utworzyć taki przycisk bez użycia JavaScript (tylko z za pomocą CSS) i tak z nim. Przyjrzyjmy się najprostszym implementacjom tych metod.

Korzyść tę metodę- łatwość obsługi (brak konieczności korzystania z dodatkowych bibliotek i skryptów).

Górny przycisk z CSS - „Nubex” .topNubex ( pozycja: stała; prawa: 45px; dół: 45px; ) Góra

Wadą tej metody jest to, że w tym przypadku przewijanie nie przebiega płynnie i odwiedzający zostaje natychmiast przekierowany na górę strony.

Poniższa metoda wykorzystuje bibliotekę JQuery. Jest łatwy w obsłudze i umożliwia płynne przewijanie strony.

Górny przycisk za pomocą JavaScript - „Nubex” #topNubex ( pozycja: stała; prawa: 45 pikseli; dół: 45 pikseli; ) $(funkcja() ( $(okno).scroll(funkcja() ( if($(this) .scrollTop( ) != 0) ( $("#topNubex").fadeIn(); ) else ( $("#topNubex").fadeOut(); ) )); ( $("treść,html").animate((scrollTop:0),700); ));

W tym przykładzie użyto obrazu jako tła przycisku. Możesz dostosować sposób wyświetlania przycisku za pomocą stylów CSS (rozmiar, kolor, kontur, przezroczystość itp.). Dlatego ta metoda jest bardziej elastyczna i zapewnia więcej opcji podczas dodawania przycisku „Powrót do góry” do swojej witryny.

Przycisk „Powrót do góry” to coś, co wielu z Was prawdopodobnie widziało na wielu stronach internetowych. Jest to strzałka, która pojawia się w prawym dolnym rogu strony internetowej podczas przewijania. Kliknięcie powoduje powrót na górę strony. Jeśli chcesz dodać przycisk Powrót do góry w ramach procesu projektowania witryny internetowej lub po prostu zastanawiasz się, jak samodzielnie go utworzyć, witamy na pokładzie!

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

Zaczniemy od stworzenia stylów i znaczników dla naszego przycisku. Oto część HTML:

< link wzgl= „arkusz stylów” href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >

< a id= „przycisk” >

Przycisk będzie się składał tylko z jednego znacznika zakotwiczenia z przyciskiem id. Dołączamy także link do biblioteki FontAwesome, dzięki czemu możemy użyć ikony dla naszego przycisku.

Początkowe style przycisku będą wyglądać następująco:

#button (wyświetlacz: blok inline; kolor tła: #FF9800; szerokość: 50 pikseli; wysokość: 50 pikseli; wyrównanie tekstu: środek; promień obramowania: 4 piksele; margines: 30 pikseli; pozycja: stała; dół: 30 pikseli; prawo: 30px; przejście: kolor tła .3s; indeks Z: 1000; ) #button:hover (kursor: wskaźnik; kolor tła: #333; ) #przycisk:aktywny (kolor tła: #555;)

Ponieważ przycisk jest elementem pakietu, a pakiety są domyślnie elementami wbudowanymi, musimy zmienić właściwość display na blok wbudowany, abyśmy mogli przypisać mu rozmiar.

Stwórzmy kwadratowy przycisk o wymiarach 50 x 50 pikseli z zaokrąglonymi narożnikami o wielkości 4 pikseli. Nadamy mu jasny pomarańczowy kolor i 30 pikseli z każdej strony. Stała pozycja sprawia, że ​​nasz przycisk zawsze pozostaje w tym samym miejscu podczas przewijania strony, a indeks Z jest na tyle wysoki, że przycisk zawsze nachodzi na inne elementy serwisu. Kiedy najedziemy kursorem na przycisk, kursor zmieni się we wskaźnik, a tło zmieni kolor na ciemnoszary. Aby przejście było płynne, dla właściwości koloru tła ustawimy przejście na 0,3 sekundy. Ponadto po naciśnięciu przycisku kolor tła również się zmienia i staje się nieco jaśniejszy.

Teraz nasz przycisk jest pusty, dodajmy do niego ikonę. Robimy to dodając element ::after pseudo= w następujący sposób:

#button::after ( treść: "\f077"; rodzina czcionek: FontAwesome; waga czcionki: normalna; styl czcionki: normalny; rozmiar czcionki: 2em; wysokość linii: 50px; kolor: #fff; )

Wybierzemy ikonę z najpopularniejszej biblioteki czcionek, FontAwesome. Zacznijmy od ikony Chevron Up.

Aby wyświetlić go w pseudoelemencie, ustaw znacznik rodziny czcionek na FontAwesome i przypisz wartość Unicode do swojej ikony w treści.

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

W tym podrozdziale porozmawiamy o tym, jak faktycznie sprawić, aby przycisk działał. Najłatwiej to zrobić, korzystając z biblioteki JavaScript jQuery. Najpierw musimy dodać jQuery do znaczników HTML. Dodaj tę linię tuż przed zamykającym znacznikiem treści.

< script źródło=" https:// cdnj. rozbłysk chmur. kom/ ajaks/ biblioteki/ jquery/3.1.1/ jquery. min. js”>

Teraz możemy napisać nasz skrypt używając składni jQuery. Dodaj ten skrypt po linii jQuery:

jQuery(dokument).ready(funkcja() ( var btn = $("#przycisk"); $(okno).scroll(funkcja() ( if ($(okno).scrollTop() > )); btn.on („kliknięcie”, funkcja(e) ( e.preventDefault(); $(„html, treść”).animate((scrollTop:0), „300”); ));

Przyjrzyjmy się bliżej temu skryptowi. Prawdopodobnie zauważyłeś pierwszą linijkę kodu:

jQuery(dokument).ready(funkcja () (

Kod wewnątrz tej funkcji należy uruchamiać tylko wtedy, gdy dokument jest w pełni załadowany. Jest to świetny sposób na uniknięcie błędów, jeśli kod JavaScript chce wprowadzić zmiany w częściach strony internetowej, które nie są w pełni ładowane w przeglądarce. Kod, który uruchamiamy po całkowitym załadowaniu dokumentu, składa się z dwóch głównych bloków kodu, z których każdy wykonuje swoje własne zadanie. Pierwsza część skryptu powoduje, że nasz przycisk pojawia się i znika po osiągnięciu określonego punktu przez przewinięcie strony. Druga część powoduje przewinięcie strony w górę po kliknięciu przycisku. Przyjrzyjmy się szczegółowo każdemu z nich.

Oto kod odpowiedzialny za tę funkcję:

Var btn = $("#przycisk");

$(okno).scroll(funkcja() ( if ($(okno).scrollTop() > 300) ( btn.addClass("pokaż"); ) else ( btn.removeClass("pokaż"); ) ));

Najpierw deklarujemy zmienną btn i przypisujemy jej identyfikator przycisku, abyśmy mogli łatwiej odwoływać się do niej w dalszej części kodu. Pomaga także JavaScriptowi szybciej wykonywać obliczenia. Gdy zapiszemy element w zmiennej, JavaScript nie będzie musiał wielokrotnie przeszukiwać całej strony, gdy będziemy musieli użyć go ponownie w naszym kodzie.

jQuery ma przydatną funkcję .scroll().

Wiąże fragment kodu, który będzie wykonywany przy każdym przewinięciu strony internetowej. Pobiera jeden parametr do funkcji, która jest wykonywana przy każdym przewijaniu strony. Można go zastosować do dowolnego przewijalnego elementu, takiego jak ramki i elementy z dodatkowymi właściwościami ustawionymi na przewijanie.

Zwykle stosujemy go do elementu okna, ponieważ tam najczęściej odbywa się przewijanie, łącznie z naszym przykładem.

$(okno). przewiń(funkcja()(

Wewnątrz funkcji umieszczamy instrukcję if/else:

Aby uzyskać aktualną pozycję paska przewijania, użyjemy wbudowanej w jQuery metody .scrollTop(). Po prostu zwraca kilka pikseli ukrytych nad obszarem przewijanym.

Zatem za każdym razem, gdy przewijamy stronę, JavaScript sprawdza, ile pikseli jest ukrytych i porównuje je z liczbą. W naszym przypadku liczba ta wynosi maksymalnie 300, ale jeśli chcesz, możesz ją zmienić.

Jeśli wybierzemy 300px, dodamy do naszego przycisku klasę show, która sprawi, że się pojawi. Jeśli liczba jest mniejsza niż 300, usuwamy tę klasę. Dodawanie i usuwanie klas to kolejny powód, dla którego jQuery jest tak popularne. Możemy to zrobić za pomocą dwóch prostych metod addClass() i RemoveClass(). Jednak nie mamy jeszcze klasy show w naszym CSS, więc dodajmy ją:

$(okno). przewiń(funkcja()(

Domyślnie Twój przycisk będzie ukryty, dlatego musimy dodać jeszcze kilka reguł do elementu #button:

#button ( przejście: kolor tła 0,3 s, krycie 0,5 s, widoczność 0,5 s; krycie: 0; widoczność: ukryte; )

Aby przejście było płynne, do atrybutu przejścia dodajmy jeszcze dwie wartości, krycie i widoczność, ustawmy na 0,5 sekundy.

Druga część skryptu pozwala na wejście na górę po naciśnięciu przycisku.

Btn.on("kliknięcie", funkcja(e) ( e.preventDefault(); $("html, treść").animate((scrollTop:0), "300"); ));

Pierwszą metodą jQuery, którą tu widzimy, jest on() .

Jego pierwszym parametrem jest zdarzenie JavaScript „click”, które występuje za każdym razem, gdy klikniemy w naszej przeglądarce. Drugi parametr to funkcja przetwarzająca, która jest uruchamiana natychmiast po wystąpieniu zdarzenia.

Funkcja przetwarzająca akceptuje parametr zdarzenia. Możemy nazwać to dowolnie, ale zazwyczaj preferowane jest e lub wydarzenie. Potrzebujemy parametru zdarzenia, aby przekazać go do funkcji i użyć go w metodzie zapobieganiaDefault(). Metoda e.preventDefault() zapobiega wykonaniu przez zdarzenie czegoś losowego, np. linku nie przenoszącego nas do następnej strony. W naszym przypadku nie jest to krytyczne, ponieważ nasz element zakotwiczający nie ma atrybutu href i i tak by nas tam nie zabrał nowa strona

, ale zawsze lepiej sprawdzić jeszcze raz.

Metoda jQuery .animate() załatwia sprawę.

$("html, treść").animate((scrollTop:0), "300"); Pierwszym parametrem metody .animate() jest lista właściwości, które powinniśmy animować. Nasza właściwość nazywa się scrollTop i chcemy, aby miała wartość 0. Typ tego parametru to więc musimy użyć nawiasów klamrowych i zapisać nasze wartości, używając składni pary klucz/wartość.

Drugi parametr to prędkość, z jaką chcemy, aby rozpoczynała się nasza animacja. Jest ona mierzona w milisekundach, a im wyższa liczba, tym wolniejsza animacja. Wartość domyślna to 400, ale zmieńmy ją na 300.

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

Teraz za każdym razem, gdy klikniemy przycisk, przenosi nas z powrotem na górę strony.

Ostateczną wersję można zobaczyć w wersji demonstracyjnej CodePen. Dołączyłem także przykładowy tekst w celach demonstracyjnych.

Spójrz na kod przycisku Powrót do góry autorstwa Matthew Caina (@matthewcain) w CodePen.

Przycisk „Powrót do góry” jest przydatnym narzędziem przy projektowaniu interfejsu strony. A jeśli Twoja witryna go posiada, interakcja odwiedzających z witryną będzie znacznie wygodniejsza. Ten przewodnik pomoże Ci zrozumieć CSS i JavaScript, nawet jeśli nie jesteś programistą stron internetowych. Mam nadzieję, że post był dla Ciebie przydatny i na pewno uda Ci się zrobić taki przycisk!

Przycisk „Powrót do góry” lub „ ” to popularny i przydatny element na stronach nowoczesnych serwisów internetowych, szczególnie w przypadkach, gdy strony te zawierają dużo treści.
Przede wszystkim poprawiają one ogólnie użyteczność witryny. Gdy użytkownik przeczytał dużą ilość treści i przewinął stronę w dół, aby powrócić na górę witryny, korzysta ze standardowego przewijania. Aby mieć pewność, że użytkownik zostanie automatycznie przekierowany na górę strony, twórcy witryny i administratorzy, którzy myślą o swoich gościach, używają różnych odmian przycisków „Wróć na górę”. Tych może być najwięcej proste rozwiązania bez użycia dodatkowych bibliotek czy skryptów, a także z rozszerzoną funkcjonalnością, z podłączeniem biblioteki i niewielkim skryptem wykonawczym.

Przyciski „Powrót do góry” są zaprojektowane na różne sposoby; mogą to być banalne linki tekstowe, przyciski o klasycznym wyglądzie, okrągłe przyciski ze strzałką lub mogą wykorzystywać obraz odpowiedniego typu. Najczęściej te przyciski wyglądają statycznie; czasami zmieniają kolor tła i czcionkę po najechaniu myszką, programiści używają efektów animacji.

Dzisiaj, dalej prosty przykład, przyjrzyjmy się, jak za pomocą animacji CSS dodać trochę ruchu do wyskakującego przycisku „Powrót na górę” i jednocześnie przyjrzyjmy się samemu skryptowi zawierającemu zdarzenia jQuery niezbędne do działania przycisku.

Aby włączyć przycisk w swojej witrynie, nie ma potrzeby dodawania żadnych tagów do znaczników Strony HTML. Wystarczy podłączyć bibliotekę jQuery i napisać mały plik wykonywalny js, a przycisk zadziała. Wygląd i animację stworzymy za pomocą CSS, łącząc plik style.css z dokumentem HTML.

I tak, jeśli Twoja witryna nie ma jeszcze podłączonej biblioteki jQuery, można to łatwo zrobić poprzez połączenie aktualna wersja bezpośrednio z sieci dostarczania treści Google (CDN), wystarczy dodać następujący wiersz przed tagiem zamykającym:

Poniżej, tuż pod tą linijką, umieść mały plik wykonywalny js, który z pewnym opóźnieniem wyświetli nasz przycisk, a także spełni swoją główną funkcję, płynnie powracając użytkownika na górę strony.

jQuery(document).ready(function($)( var //szybkość przewijania na górę strony prędkość = 500, //układ przycisków HTML $scrollTop = $(" ").appendTo("treść"); $scrollTop.click(function(e)( e.preventDefault(); $("html:not(:animowane),body:not(:animowane)").animate(( scrollTop: 0), prędkość); )); //ustawienie trybu wyglądu funkcji przycisku show_scrollTop() ( ($(window).scrollTop() > 300) ? $scrollTop.fadeIn(600) : $scrollTop.fadeOut (600) ; ) $(okno).scroll(funkcja() ( show_scrollTop(); ));

Dodałem kilka komentarzy do scenariusza, że ​​tak powiem, dla lepszego zrozumienia. Jak napisałem powyżej, tę metodę eliminuje potrzebę dodawania jakichkolwiek tagów do znaczników strony HTML, skrypt robi to doskonale; Gdy użytkownik przewinie stronę o 300px w dół, wtyczka napisze tag przycisku, w naszym przypadku jest to:

w treści strony, wszystko w tym samym miejscu przed tagiem zamykającym.

Do płynnego pojawiania się i ukrywania przycisku używamy funkcji .fadeIn() i .fadeOut() z zadaną szybkością 600 milisekund. Szybkość przewijania do góry strony jest ustawiona na 500 milisekund.

Do oznaczenia przycisku użyłem tagu , link do którego podałem hash (hash), atrybut title - po najechaniu myszką na przycisk wyświetli się standardowa podpowiedź, przypisana zostanie konkretna klasa z nazwą selektora scrollTop oraz użyłem czcionki ikonowej z Czcionki Niesamowity pakiet jako kotwica linku .
Teraz znając nazwę selektora, bezpośrednio w CSS, wykorzystując określone właściwości, będziemy animować nasz przycisk, tworzyć wygląd, ustalimy, gdzie pojawi się na stronie, a także dołączymy animację.
Wewnątrz kodu css dodałem szczegółowe komentarze do prawie każdej właściwości, więc nie widzę sensu opisywania wszystkiego szczegółowo, skupię się konkretnie na efekcie animacji i połączeniu ikon czcionek jako elementu przycisku.
Ikona może być inna, nie taka sama jak w przykładzie, najważniejsze jest to, że odpowiada bezpośredniemu celowi przycisku, w naszym przypadku jest to dowolny symbol indeksu, na przykład pojedyncze strzałki, obszerne lub cienkie, z lub bez wypełnienia, wyraźnie wskazując kierunek przewijania po kliknięciu przycisku.
Aby korzystać z ikon Font Awesome nie ma konieczności pobierania całego pakietu, istnieje możliwość bezpośredniego podłączenia biblioteki np. z Bootstrap CDN, w tym celu w sekcji HTML wystarczy wpisać następującą linijkę:

Po podłączeniu Font Awesome można je wykorzystać w kodzie HTML lub jak w naszym przypadku w js wykorzystując specjalne klasy, bazową fa i klasę dla konkretnego typu ikonki, w naszym przypadku jest to fa-angle-double-up . Klasę danej ikony możesz sprawdzić na stronie internetowej.
Wygląd kontenera ikon, rozmiar i kolor tła, położenie, kolor i rozmiar czcionki, wszystko to ustala się bezpośrednio w css, skupiając się na selektorze.scrollTop i

/* formuje treść przycisku, położenie i efekt przejścia */ .scrollTop ( /* domyślnie ukryty */ display: none; /* zaokrąglone rogi */ -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-promień: 100%; obramowanie-promień: 100%; /* popraw położenie przycisku */ pozycja: stała; /* szerokość: 60px / prawo: 1rem; * widok kursora */ kursor: wskaźnik; /* efekt przejścia pomiędzy dwoma stanami przycisku */ -webkit-przejście: dolny 0,2 s sześcienny-bezier(0,42, 0, 0,58, 1) -moz-przejście: dolny 0,2 s sześcienny- bezier(0,42, 0, 0,58, 1); -ms-przejście: dolne 0,2 s sześcienne-bezierowe (0,42, 0, 0,58, 1); sześcienne-bezierowe (0,42, 0, 0,58, 1); Cube-bezier(0.42, 0, 0.58, 1) /* przesunięcie przycisku w górę po najechaniu myszą */ .scrollTop:hover ( dół: 2rem ) / * dodatkowe elementy projektu przycisku */ .scrollTop:przed, .scrollTop:po (treść : „”; u góry: 0; po lewej: 0; kolor tła: #766DCC;

Pozostaje rozważyć samą animację. Efekt animacji nie dotyczy całego przycisku, ale dodatkowych pseudoelementów:after i:before. Aby utworzyć animację CSS, musisz dodać właściwość animacji do stylów tych elementów, co pozwoli Ci zdefiniować nazwę, dostosować przyspieszenie i czas trwania animacji, a także inne szczegóły dotyczące przebiegu animacji. Wygląd animacji konfiguruje się za pomocą @keyframes, zestawu klawiszy konfigurujących klatki animacji.

W naszym przykładzie nazwa animacji to clickMe, czas trwania wynosi 1,8 s, opóźnienie wynosi 333 ms dla:before i 777 ms dla pseudoelementu:after. Określamy także ilość powtórzeń animacji – nieskończona nieskończoność oraz rodzaj rozluźnienia animacji – przyspieszenie na początku.

Po ustawieniu tymczasowych właściwości animacji pozostaje określenie wyglądu animacji, odbywa się to w bloku @keyframes. Najpierw podawana jest nazwa animacji, a następnie w nawiasach klamrowych opisane są jej kroki. Z przykładowego kodu widać, że wykorzystywane są ramki właściwości opacity (przezroczystość) oraz transformacja elementu transform za pomocą funkcji skali - skala elementu. Kroki animacji są określane w procentach.
Ożywienie Właściwości CSS opisane osobno dla przeglądarek webkit @-webkit-keyframes i Przeglądarka Mozilla Firefox @-moz-keyframes, aby zapobiec nieprawidłowemu wyświetlaniu animacji w tych przeglądarkach internetowych.

To wszystko. Jeszcze raz spójrz na żywy przykład działania przycisku „Powrót do góry” i jeśli go potrzebujesz, pobierz źródła spakowane w archiwum i opublikowane w chmurze na Y.Disk.

Pozdrawiam, Andrey

Funkcja taka jak przycisk „w górę” witryny sprawia, że ​​zasób internetowy jest wygodniejszy dla odwiedzających. Pomaga w łatwym przechodzeniu z dowolnego miejsca na stronę na górę strony. Jest to koniecznością w przypadku sklepów internetowych i witryn z dużymi artykułami, które wymagają długiego przewijania w dół.

NA w tej chwili W większości witryn nie ma takiej funkcji jak przycisk „w górę” i nie ma w tym nic krytycznego. Ale jego użycie może przynieść wiele korzyści zarówno zasobom internetowym, jak i odwiedzającym.

Często zdarza się, gdy strona zasobu internetowego jest mocno obciążona informacjami, gdy artykuł informacyjny zajmuje dużo miejsca i trzeba przewijać stronę w dół za pomocą kółka myszy. Oprócz tego na końcu artykułu może znajdować się wiele komentarzy na jego temat.

Kiedy odwiedzający czyta artykuł, przewijanie strony w dół nie jest niczym nudnym, ale kiedy tekst dobiega końca i trzeba przejść w górę, zaczyna to być trochę męczące. Większość ludzi będzie po prostu zbyt leniwa, aby przewijać przez długi czas i po prostu zamkną witrynę, zamiast błąkać się po jej przestrzeniach.

Użycie przycisku umożliwiającego natychmiastowe przejście na górę strony sprawia, że ​​czas spędzony na stronie staje się wygodniejszy.

Pozytywne aspekty samego zasobu wynikają z czynników z przeszłości, ponieważ uproszczona nawigacja po witrynie poprawia czynniki behawioralne, ponieważ wszyscy odwiedzający będą bardziej aktywni w swoich działaniach i przejdą na inne strony.

Tym samym dane wpływają na stosunek wszystkich wyszukiwarek do witryny i prowadzą do poprawy jej miejsca w wynikach wyszukiwania.

• tworzenie obrazu;
• tworzenie skryptu;
• tworzenie stylu przycisku;
• dodanie do serwisu.

Aby dodać przycisk „powrót na górę” na stronie, należy najpierw stworzyć samą ikonę, która po kliknięciu przeniesie użytkownika na górę strony. Aby to zrobić, możesz skorzystać z gotowych opcji, spośród których zawsze możesz wybrać najbardziej odpowiednią.

Aby poprawić wygląd przycisku, należy wprowadzić pewne ulepszenia, a mianowicie wykonać duszka, który pozwala na łączenie obrazów tła w oparciu o CSS, tworząc w ten sposób animację.

Dla prace graficzne możesz użyć dowolnego edytora. Ale najwygodniejszą opcją byłaby usługa online PIXLR, ponieważ nie musisz tutaj niczego pobierać i możesz z niej korzystać bezpośrednio w przeglądarce.

Aby rozpocząć, w wyświetlonym oknie edytora należy zaznaczyć pole „Prześlij obraz z komputera”. Weźmy jako przykład zdjęcie rakiety.

Jeśli wymiary wybranej ikony są zbyt duże, konieczne będzie dokonanie niewielkiej korekty rozmiaru. W tym celu należy przejść do górnego menu i wybrać pole „Edycja”, a po „Swobodna transformacja…”

Następnie obok obrazu pojawiają się specjalne znaczniki; przesuwając je, możesz zmienić rozmiar obrazu. Aby zachować proporcje, możesz użyć klawisza Shift, trzymając go, musisz przesuwać niebieskie znaczniki. Na koniec tych działań uzyskuje się obraz rakiety.

Następnym krokiem jest utworzenie kopii warstwy.

Teraz musisz przesunąć obraz rakiety z nowej warstwy nieco w górę. Aby to zrobić, wygodnie będzie skorzystać z narzędzia przenoszenia, które znajduje się w drugiej kolumnie lewego menu, oraz strzałki w górę na klawiaturze.

Teraz musisz ustawić górny obraz jako czarno-biały. Można to zrobić za pomocą pozycji „Korekta” - „Barwa/Nasycenie” w górnym menu. Aby uzyskać całkowitą desaturację, suwak Nasycenie powinien być ustawiony na -100. Ta akcja pozwoli Ci stworzyć efekt, w którym przycisk „W górę” po najechaniu na niego zmieni kolor z czarno-białego na kolorowy.

Ostatnim akcentem jest usunięcie dodatkowej przestrzeni wokół dwóch obrazów. Aby to zrobić, wybierz opcję „Przytnij” z lewego menu i wybierz tylko dwie rakiety w prostokącie. Aby wykonać kadrowanie, naciśnij klawisz Enter.

Rezultatem jest obraz, w którym nie ma niczego niepotrzebnego wolna przestrzeń. Będziesz musiał zapisać szerokość i wysokość powstałego obrazu, ponieważ dane te będą przydatne w następnym kroku.

Aby zapisać, należy kliknąć „Plik” - „Zapisz”, gdzie w lewej pozycji „Mój komputer” wpisujemy nazwę obrazu (tylko układ angielski), wybieramy format (w w tym przypadku-PNG) i kliknij przycisk „Tak”.

W tym przypadku nie ma potrzeby pisania scenariusza. Możliwe będzie skorzystanie z opcji publicznie dostępnej poprzez dokonanie pewnych poprawek w gotowym kodzie.

Aby to zrobić, musisz pobrać dowolny edytor kodu. Najpopularniejszą, a także bezpłatną opcją jest Notepad++. Po zainstalowaniu musisz skopiować i wkleić do niego cały ten kod:

Aby zainstalować przycisk przewijania strony w górę, należy umieścić kod w wymaganym miejscu. Należy go wpisać przed tagiem .

Najczęściej przycisk „w górę” witryny znajduje się na dole („stopka”).

Musisz dodać następujący kod do pliku style.css witryny:

W takim przypadku potrzebne będą dane dotyczące szerokości i wysokości obrazu. Pozostaje tylko wprowadzić otrzymane dane do kodu, a przycisk „w górę” strony będzie gotowy! Co jeszcze?

W tym systemie CMS przycisk „Góra” można utworzyć za pomocą wtyczek lub samodzielnie.

Metoda wtyczki jest najwygodniejsza i najłatwiejsza w instalacji, ponieważ wystarczy kliknąć przycisk instalacji i skonfigurować wszystkie funkcje w menu wtyczki.

Do wyboru tego ostatniego należy podchodzić ostrożnie, ponieważ wraz z nim można łatwo kupić wirusa dla witryny. Najpopularniejszą i sprawdzoną opcją jest wtyczka o nazwie Scroll Back To Top. Możesz go pobrać za pomocą standardowego wyszukiwania wtyczek Wordpress.

To rozszerzenie ma wiele funkcji i bardzo łatwo będzie dostosować przycisk „powrót do góry” dla witryny Wordpress. Nie jest konieczna zmiana wszystkich wartości; wystarczy skonfigurować wygląd i lokalizację przycisku na stronie witryny.

Jak widać, instalacja przycisku „w górę” za pomocą wtyczek jest bardzo prosta. Ale jest jeden ważny niuans, a mianowicie wszyscy zainstalowana wtyczkaładuje CMS. Może to mieć wpływ na szybkość zasobu internetowego. Dlatego większość właścicieli witryn stara się wprowadzać wszelkie zmiany bezpośrednio w kodzie, a nie za pomocą rozszerzenia stron trzecich. Możesz zrobić przycisk „w górę” dla strony internetowej w formacie HTML, co zminimalizuje zużycie zasobów.

Zanim zmienisz wszystkich pliki systemowe Wordpress musi je zrobić kopie zapasowe. Następnie możesz wykonać wszystkie kroki, aby utworzyć własny przycisk opisany powyżej.

CMS Joomla obsługuje także instalację wtyczek, podobnie jak Wordpress. Najbardziej udaną wersją przycisku „góra” dla witryny w Joomla 3 jest rozszerzenie o nazwie Top of the Page.

W tym systemie CMS dowolną wtyczkę można zainstalować za pomocą „Menedżera rozszerzeń”. Aby to zrobić, potrzebujesz:

• pobierz wtyczkę z Internetu;
• kliknij przycisk „Przeglądaj” w menedżerze rozszerzeń;
• wybierz pobrane archiwum;
• Kliknij „Pobierz” i zainstaluj.

Teraz musisz go aktywować w Menedżerze wtyczek. Aby to zrobić, musisz przejść do tej sekcji, znaleźć wtyczkę i zmienić jej status na „włączony”.

Góra strony posiada następującą funkcjonalność:

• Uruchom/administrator - włączenie opcji nie tylko na zasobie internetowym, ale także w samym panelu Joomla CMS.
• Button Reveal Position – ile pikseli użytkownik musi przewinąć, aby pojawił się przycisk „w górę”.
• Pomiń tekst przycisku - obecność tekstu na przycisku.
• Zawsze na górze - strona serwisu będzie zawsze wyświetlana od początku. W przypadku używania kotwic do przewijania do określonego miejsca na stronie, opcja ta nie musi być aktywowana.
• Smooth Scroll - sprawia, że ​​przewijanie strony jest płynniejsze.
• Czas trwania przewijania - czas po którym strona całkowicie przesunie się na początek.
• Przejście przewijania — dodaje wspaniałe efekty wizualne do przewijania.
• Ułatwienie przejścia - „ułatwienie” ruchu na górę strony.
• Lokalizacja łącza - lokalizacja ikony. Standardowo przycisk znajduje się w prawym dolnym rogu.
• Użyj stylów - indywidualny styl przycisku, który możesz ustawić w polu poniżej. Jeśli zostanie ustawiony na wartość ujemną, wszystkie parametry stylizacji zostaną pobrane z aktywnego motywu witryny.
• Styl łącza - pole do wpisania parametrów stylu przycisku.

Aby samodzielnie dostosować styl przycisku „w górę”, musisz mieć przynajmniej minimalną wiedzę na temat CCS. W W przeciwnym razie Warto zmienić wartość przedostatniego parametru na „Nie”.

Kolejnym ważnym niuansem jest to, że zwykły napis na ikonie zawiera tekst w języku angielskim: Return to Top. Taki tekst nie może znajdować się na rosyjskojęzycznej stronie, dlatego należy go po prostu wyłączyć w parametrach wtyczki lub zmienić na rosyjski.

Aby zmienić ten napis należy zalogować się do serwera serwisu za pomocą protokołu FTP lub wbudowanego hostingu menedżer plików. Następnie w katalogu „/administrator/language/en-GB/” należy znaleźć plik o nazwie „en-GB.plg_system_topofthepage.ini”.

Przed zmianą tekstu należy zmienić kodowanie tego dokumentu do UTF-8. Umożliwi to normalne wyświetlanie rosyjskich liter.

i zmień frazę w cudzysłowie na rosyjski. Możesz używać zwrotów typu „W górę!”, „Na początek!” lub „W górę!”

Przycisk „w górę” witryny na Ucoz będzie musiał zostać wykonany za pomocą wstrzyknięcia kodu, ponieważ podłączenie wtyczek do tego CMS-a jest niemożliwe. Nie wymaga to jednak długiego studiowania plików systemowych i wyszukiwania niezbędnych linii, wystarczy je wstawić; mały kod w wymagane miejsce.

Do montażu będziemy potrzebować:

• przejdź do „Panel sterowania -> Projektowanie -> Zarządzanie projektami (szablony) -> Dół strony;
• wstaw skrypt (znajdziesz go na oficjalnej stronie projektu oraz w zasobach stron trzecich).

Następnie w prawym dolnym rogu pojawi się ikona przenosząca użytkownika na samą górę strony.

Jak widać, instalacja przycisku „Powrót do góry” dla któregokolwiek z systemów CMS nie była szczególnie trudna. Możesz użyć metody instalacji automatycznej (wtyczki) lub ręcznej. Jednak ostatnia opcja pozostaje najbardziej odpowiednia, ponieważ nie ma negatywnego wpływu na wydajność witryny.

Możesz użyć przycisku „powrót na górę” dla witryny HTML, aby zminimalizować zużycie zasobów witryny, ponieważ duża liczba rozszerzeń może mieć negatywny wpływ na wydajność zasobu. Jedna wtyczka przycisku „w górę” nie wpłynie znacząco na czas ładowania stron serwisu, jednak w większości przypadków użytkownik ma zainstalowanych w systemie CMS co najmniej kilkanaście wtyczek. W takim przypadku każda wtyczka może negatywnie wpłynąć na wydajność stron witryny.