Taka funkcja, jak przycisk „w górę” witryny, sprawia, że zasób internetowy jest wygodniejszy dla odwiedzających. Pomaga łatwo przejść z dowolnego miejsca na stronie na górę strony. Jest to niezbędne w przypadku sklepów internetowych i witryn z dużymi artykułami, które wymagają długiego przewijania w dół.
Do czego to służy
W tej chwili większość 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.
Korzyści dla odwiedzających
Zdarza się to często, gdy strona zasobu internetowego jest mocno obciążona informacjami, gdy artykuł informacyjny zajmuje dużo miejsca i trzeba przewijać stronę w dół kółkiem myszy. Oprócz tego na końcu artykułu może być wiele komentarzy na ten temat.
Kiedy odwiedzający czyta artykuł, nie ma nic męczącego w przewijaniu strony w dół, ale kiedy tekst dobiega końca i trzeba iść 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 iść na kolejny spacer po jej obszarach.
Korzystanie z przyciskubłyskawiczne przejście na górę strony sprawia, że spędzanie czasu w serwisie jest wygodniejsze.
Korzyść z zasobów internetowych
Pozytywne korzyści dla samego zasobu pochodzą z przeszłych czynników, ponieważ łatwiejsza nawigacja w witrynie poprawia czynniki behawioralne, ponieważ wszyscy odwiedzający będą bardziej aktywni w swoich działaniach i przechodzą na inne strony.
Tak więc te czynniki behawioralne wpływają na stosunek wszystkich wyszukiwarek do witryny i prowadzą do poprawy pozycji w wynikach wyszukiwania.
Jak samodzielnie zrobić przycisk „w górę” na stronie
Dalsze postępowanie. Zawsze możesz samodzielnie utworzyć przycisk przewijania witryny w dowolnym systemie CMS, wykonując zaledwie kilka niezwykle prostych kroków:
- tworzenie obrazu;
- tworzenie skryptu;
- utwórz styl przycisku;
- dodawanie do serwisu.
Obraz przycisku
Aby dodać przycisk „w górę” na stronie, najpierw musisz utworzyć samą ikonę, po kliknięciu użytkownik przejdzie na górę strony. W tym celu możesz skorzystać z gotowych opcji, spośród których zawsze możesz wybrać najbardziej odpowiednią.
Aby poprawić wygląd przycisku, musimy wprowadzić pewne ulepszenia, a mianowicie stworzyć sprite, który pozwala nam łączyć obrazy tła oparte na CSS, tworząc w ten sposób animację z nich.
Do prac graficznych możesz użyć dowolnego edytora. Ale najwygodniejszą opcją byłaby usługa online. PIXLR, ponieważ nie ma tu nic do pobrania i możesz go używać bezpośrednio w przeglądarce.
Aby rozpocząć, w wyświetlonym oknie edytora wybierz pole „Prześlij obraz z komputera”. Weźmy jako przykład obraz rakiety.
Jeżeli wymiary wybranej ikony są zbyt duże, będziesz musiał dokonać niewielkiego dostosowania rozmiaru. Aby to zrobić, przejdź do górnego menu i wybierz pole „Edytuj”, a po „Swobodne przekształcenie …”
Następnie obok obrazu pojawiają się specjalne znaczniki, którymi można zmieniać rozmiar obrazu. Aby zachować proporcje, możesz użyć klawisza Shift, przytrzymując go, aby przesunąć niebieskie znaczniki. Na końcu tych kroków uzyskuje się obraz rakiety.
Następnym krokiem jest utworzenie kopii warstwy.
Teraz musisz nieco przesunąć obraz rakiety z nowej warstwy. W tym celu wygodnie będzie użyć narzędzia do przenoszenia, które znajduje się w drugiej kolumnie lewego menu, oraz strzałki w górę na klawiaturze.
Teraz musimy ustawić górny obraz na czarno-biały. Można to zrobić za pomocą pozycji „Korekta” - „Odcień / Nasycenie” w górnym menu. Aby uzyskać całkowitą desaturację, suwak Saturation powinien być ustawiony na -100. Ta akcja pozwoli Ci stworzyć efekt, w którym przycisk „W górę” zmieni kolor z czarno-białego na kolorowy po najechaniu na niego.
Ostatnim akcentem jest usunięcie dodatkowej przestrzeni wokół dwóch zdjęć. Aby to zrobić, wybierz pozycję „Przytnij” z lewego menu iwybieramy tylko dwie rakiety w prostokącie. Aby wykonać przycinanie, naciśnij klawisz Enter.
Wynikiem jest obraz, w którym nie ma dodatkowego wolnego miejsca. Będziesz musiał zapisać szerokość i wysokość wynikowego obrazu, ponieważ te dane będą przydatne w następnym kroku.
Aby zapisać, musisz kliknąć „Plik” - „Zapisz”, gdzie w lewym akapicie „Mój komputer” wpisujemy nazwę obrazu (tylko układ angielski), wybierz format (w tym przypadku, PNG) i kliknij przycisk „Tak”.
Plik ze skryptem przycisku "w górę"
W tym przypadku nie musisz pisać skryptu. Będzie można korzystać z wersji publicznej, wprowadzając pewne poprawki do gotowego kodu.
Aby to zrobić, musisz pobrać dowolny edytor kodu. Najpopularniejszą i zarazem darmową opcją jest Notepad++. Po zainstalowaniu musisz skopiować i wkleić do niego cały ten kod:
| $(document).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); return false;}); }); |
Następnie kliknij w górnym menu "Plik" - "Zapisz jako…", po czym zapisujemy kod w formacie.js. Następnie możesz użyć tego kodu na swojej stronie, przesyłając do niej pliki skryptów i obrazy za pomocą połączenia FTP.
Zainstaluj na stronie
Aby ustawić przycisk przewijania w górę witryny, musisz umieścić wwymagany kod miejsca. Musisz go wpisać przed tagiem.
Tworzenie stylu przycisku za pomocą CSS
Najczęściej przycisk „w górę” witryny znajduje się na dole („stopka”).
Następujący kod należy dodać do pliku style.css witryny:
|
/Przycisk w górę/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/ścieżka do obrazu natywnego/ width:39px;/ przycisk szerokość/ height:96px;/50% wysokość przycisku/ bottom:5px;/dolne dopełnienie w stałej pozycji/ left:89%;/przesuń w lewo/ }.scrollTop:hover{ background-position:0 -108px; } /przesunięcie tła/" |
W tym przypadku potrzebne będą dane dotyczące szerokości i wysokości obrazu. Pozostaje tylko wpisać otrzymane dane do kodu, a przycisk „w górę” dla strony będzie gotowy! Co jeszcze?
Przycisk w górę dla witryny Wordpress
W przypadku tego systemu CMS przycisk „W górę” można wykonać za pomocą wtyczek lub niezależnie.
Metoda wtyczek jest najwygodniejsza i najłatwiejsza do zainstalowania, ponieważ wymaga jedynie kliknięcia przycisku instalacji i skonfigurowania wszystkich funkcji w menu wtyczek.
Do wyboru tego ostatniego należy podchodzić ostrożnie, ponieważ dzięki niemu łatwo będzie nabyć wirusa na stronie. Najpopularniejszą i sprawdzoną opcją jest wtyczka o nazwie Scroll Back To Top. Możesz go pobrać za pomocą standardowego wyszukiwania wtyczek Wordpress.
To rozszerzenie mawiele funkcji i bardzo łatwo będzie dostosować przycisk „w górę” dla witryny Wordpress. Nie jest konieczna zmiana wszystkich wartości, wystarczy skonfigurować wygląd i położenie przycisku na stronie serwisu.
Jak widać, konfiguracja przycisku w górę za pomocą wtyczek jest bardzo łatwa. Ale jest jeden ważny niuans, który polega na tym, że każda zainstalowana wtyczka ładuje CMS. Może to wpłynąć na szybkość zasobu internetowego. Dlatego większość właścicieli witryn stara się wprowadzać wszystkie zmiany bezpośrednio w kodzie, a nie za pomocą rozszerzeń stron trzecich. Możesz utworzyć przycisk „w górę” dla witryny HTML, co zminimalizuje zużywane zasoby.
Przed zmianą wszystkich plików systemowych Wordpress, musisz wykonać ich kopię zapasową. Następnie możesz wykonać wszystkie kroki, aby utworzyć własny przycisk, opisany powyżej.
Przycisk "w górę" dla Joomla
CMS Joomla obsługuje również instalację wtyczek, takich jak Wordpress. Najbardziej udaną wersją przycisku „w górę” dla witryny w Joomla 3 jest rozszerzenie o nazwie Top of the Page.
W tym systemie CMS można zainstalować dowolną wtyczkę za pomocą „Menedżera rozszerzeń”. Do tego 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". Dla tegomusisz przejść do tej sekcji, znaleźć wtyczkę i zmienić jej status na „włączone”.
Następnym krokiem jest skonfigurowanie wszystkich parametrów rozszerzenia przy użyciu tej samej sekcji, w której po prawej stronie należy znaleźć „Parametry podstawowe” tej wtyczki.
Góra strony ma następującą funkcjonalność:
- Uruchom/administrator - włączenie opcji nie tylko w zasobie internetowym, ale także w samym panelu Joomla CMS.
- Pozycja odsłonięcia przycisku - o 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 witryny będzie zawsze wyświetlana od góry. Podczas używania kotwic do przewijania do określonej lokalizacji na stronie, ta opcja nie musi być włączona.
- Smooth Scroll - sprawia, że przewijanie strony jest płynniejsze.
- Czas przewijania - czas, po którym strona całkowicie przesunie się na początek.
- Scroll Transition - Dodaje więcej efektów wizualnych do przewijania.
- Transition Easing - "osłabienie" ruchu na górę strony.
- Lokalizacja linku - lokalizacja ikony. Domyślnie przycisk znajduje się w prawym dolnym rogu.
- Use Styles – indywidualny styl przycisku, który można ustawić w polu poniżej. W przypadku przełączenia na wartość ujemną wszystkie ustawienia stylu zostaną pobrane z aktywnego motywu witryny.
- Styl linku - pole do wprowadzania parametrów stylu przycisku.
Aby dostosować styl przycisku „w górę”, musisz mieć co najmniej minimalnyWiedza CCS. W przeciwnym razie należy zmienić wartość przedostatniego parametru na „Nie”.
Kolejnym ważnym niuansem jest to, że zwykły napis na ikonie zawiera angielski tekst: Return to Top. Taki tekst nie może być obecny na stronie rosyjskojęzycznej, więc powinieneś po prostu wyłączyć go w parametrach wtyczki lub zmienić na rosyjski.
Aby zmienić ten napis, musisz przejść do serwera witryny za pomocą FTP lub menedżera plików wbudowanego w hosting. Następnie w katalogu "/administrator/language/en-GB/" musisz znaleźć plik o nazwie "en-GB.plg_system_topofthepage.ini".
Przed zmianą tekstu należy zmienić kodowanie tego dokumentu na UTF-8. Spowoduje to normalne wyświetlanie rosyjskich liter.
Następnie znajdujemy następującą linię:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Powrót do góry"" |
i zmień frazę w cudzysłowie na rosyjski. Możesz używać wyrażeń takich jak „Do góry!”, „Na górę!” lub „W górę!”.
Na koniec będziesz musiał zapisać zmodyfikowany plik i sprawdzić przycisk „w górę” dla witryny w Joomla.
Przycisk w górę dla Ucoz
Przycisk „w górę” dla witryny na Ucoz będzie musiał zostać wykonany za pomocą wstrzykiwania kodu, ponieważ nie można podłączyć wtyczek dla tego CMS. Nie wymaga to jednak długiego studiowania plików systemowych i szukania potrzebnych wierszy, wystarczy wkleić mały kod w odpowiednim miejscu.
Aby nas zainstalowaćwymagane:
- przejdź do „Panel sterowania -> Projekt -> Zarządzanie projektem (szablony) -> Dół strony;
- wstaw skrypt (można go znaleźć na oficjalnej stronie projektu oraz w zasobach stron trzecich).
Wniosek
Następnie w prawym dolnym rogu pojawi się ikona, przenosząca użytkownika na samą górę strony.
Jak widać, ustawienie przycisku Wstecz dla dowolnego systemu CMS nie było szczególnie trudne. Możesz użyć zarówno automatycznej metody instalacji (wtyczek), jak i ręcznej. Jednak ta ostatnia opcja pozostaje najbardziej odpowiednia, ponieważ nie wpływa negatywnie na wydajność witryny.
Możesz użyć przycisku „powrót do góry” 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 będzie w stanie znacząco wpłynąć na czas ładowania stron serwisu, ale w większości przypadków użytkownik ma zainstalowanych na CMS co najmniej kilkanaście wtyczek. W takim przypadku każda wtyczka może niekorzystnie wpłynąć na wydajność stron witryny.
