Funkcja taka jak przycisk "w górę" dla witryny, sprawia, że ​​zasób internetowy jest bardziej wygodny dla odwiedzających. Pomaga w łatwym poruszaniu się od dowolnego punktu strony na górę. Jest to po prostu konieczne w sklepach internetowych i witrynach z dużymi artykułami, które wymagają długiego przewijania w dół.

Dlaczego jest to konieczne

Obecnie w większości witryn nie ma funkcji, takich jak przycisk "up", i nie ma w tym nic złego. Ale jego użycie może przynieść wiele korzyści zarówno zasobom online, jak i odwiedzającym.

Korzyści dla odwiedzających

Często, gdy strona zasobów internetowych jest mocno obciążona informacjami, gdy artykuł informacyjny zajmuje dużo miejsca i musi przewinąć stronę w dół za pomocą kółka myszy. Oprócz tego, na końcu artykułu może być wiele komentarzy do niej. Kiedy użytkownik czyta artykuł, trudno przewijać stronę, ale kiedy tekst dobiega końca, a Ty musisz się podnieść, zaczyna się trochę męczyć. Większość ludzi po prostu leniwie nosi długi zwój, a oni po prostu zamkną witrynę, zamiast wciąż przechadzać się po jej przestrzeniach. Użycie przycisku do natychmiastowego przejścia na górę strony sprawia, że ​​spędzanie czasu w witrynie jest wygodniejsze.

Korzyści z zasobów internetowych

Pozytywne strony dla samego zasobu są oparte na przeszłych czynnikach, ponieważ uproszczenie ruchu na stronie poprawia czynniki behawioralne, ponieważ wszystkieodwiedzający będą bardziej aktywni w swoich działaniach i przejdą na inne strony.


Zatem dane czynniki behawioralne wpływają na stosunek wszystkich wyszukiwarek do witryny i prowadzą do poprawy miejsca wykonywania wyszukiwania.

Jak zrobić przycisk "up" na samym serwisie

Chodźmy dalej. Przycisk przewijania strony do dowolnego z CMS można zawsze zrobić sam, wykonując kilka bardzo prostych kroków:

tworzenie obrazu;

tworzenie scenariusza;

tworzenie stylu przycisku;

dodanie do strony.

Obraz przycisku

Aby dodać przycisk "w górę" na stronie, należy najpierw ustawić ikonę, klikając stronę, na której użytkownik się znajduje. Do tego możesz użyć gotowych wariantów, spośród których zawsze możesz wybrać najbardziej odpowiedni. Aby poprawić wygląd przycisku, musisz wprowadzić pewne ulepszenia, a mianowicie stworzyć duszek, który pozwala CSS połączyć obrazy tła, tworząc z nich animację. W przypadku prac graficznych można użyć dowolnego edytora. Ale najwygodniejszą opcją jest usługa PIXLR w trybie online, ponieważ pobieranie niczego nie jest potrzebne i można z nich korzystać bezpośrednio w przeglądarce. Aby rozpocząć pracę w oknie edytora, musisz wybrać pole "Prześlij obraz z komputera". Jako przykład, weź obraz rakietowy. Jeśli rozmiar wybranej ikony jest zbyt duży, musisz dokonać niewielkiej korekty do rozmiaru. Aby to zrobić, przejdź do górnego menu i wybierz w polu "Edytuj" i po«Darmowa transformacja». Następnie, wraz z obrazkiem są specjalne znaczniki, przesuwając je, możesz zmienić rozmiar obrazu. Aby zapisać proporcje, możesz użyć klawisza Shift, naciskając przycisk, aby przesunąć niebieskie znaczniki. Pod koniec tych działań pojawia się obraz rakietowy.
Kolejnym krokiem jest utworzenie kopii warstwy. Teraz musisz przesunąć obraz rakiety z nowej warstwy nieco wyżej. Aby to zrobić, wygodnie jest użyć ruchomego narzędzia znajdującego się w drugiej kolumnie lewego menu i strzałki w górę na klawiaturze. Teraz musisz zrobić zdjęcie czarno-białe. Można to zrobić za pomocą elementu "Korekta" - "Tone /Saturation" w górnym menu. Aby uzyskać pełne przebarwienie, suwak "Nasycenie" powinien przyjąć wartość -100. Pozwoli to uzyskać efekt, w którym przycisk "Up" będzie konwertowany z czarnego i białego na kolorowy po najechaniu na niego. Ostatnim dotknięciem jest usunięcie niepotrzebnej przestrzeni wokół dwóch obrazów. Aby to zrobić, wybierz pozycję "Przycinanie" z lewego menu i wybierz tylko dwie rakiety w prostokącie. Aby wykonać przycinanie, wciśnięty jest klawisz Enter. Pojawił się obraz, w którym nie ma nadmiernej ilości wolnego miejsca. Musisz zapisać wartość szerokości i wysokości wynikowego obrazu, ponieważ te dane będą przydatne w następnym kroku. Aby zapisać, należy kliknąć "Plik" - "Zapisz", gdzie po lewej stronie "Mój komputer" zapisać nazwę obrazu (tylko układ angielski), wybrać format (w tym przypadku - PNG) i nacisnąć przycisk " Tak. "

Plik ze skryptemprzyciski "up"

Zapisywanie skryptu w tym przypadku nie jest wymagane. Możesz użyć opcji publicznej, wprowadzając poprawki do gotowego kodu. Aby to zrobić, pobierz dowolny edytor kodu. Najpopularniejszą i poza darmową wersją jest Notepad ++. Po zainstalowaniu musisz skopiować i wkleić cały kod:



Następnie kliknij "Plik" - "Zapisz jako" w górnym menu, a następnie zapisz kod w formacie .js. Następnie możesz użyć tego kodu w swojej witrynie, przesyłając do niego pliki obrazów za pomocą połączenia FTP.

Instalacja na stronie

Aby ustawić przycisk przewijania strony, musisz umieścić kod we właściwym miejscu. Musisz wprowadzić go przed tagiem.

Tworzenie stylu przycisków w CSS

Często przycisk "w górę" witryny znajduje się na dole ("piwnica"). Plik style.css witryny jest wymagany do wprowadzenia następującego kodu:

"/* button up * /. ScrollTop {
background: url ('images /up.png') 0 0 no-repeat; /* ścieżka obrazu * /
szerokość: 39px; /* szerokość przycisku * /
wysokość: 96px; /* 50% wysokość przycisku * /
dół: 5px; /* przy ustalonej pozycji wcięcie od spodu * /39) w lewo: 89%; /* przesunięcie w lewo * /
}
.scrollTop: hover {położenie-tła: 0 -108px;} /* przesunięcie tła * /"


W takim przypadku będziesz potrzebował danych dotyczących szerokości i wysokości obrazu. Wszystko, co musisz zrobić, to wprowadzić odebrane dane do kodu, a przycisk "w górę" dla strony będzie gotowy! Co jeszcze?

Przycisk "Up" dla witryny Wordpress

W przypadku tego CMS, przycisku "Up" można dokonać za pomocą wtyczek, jak również samodzielnie.Metoda wtyczki jest najwygodniejsza i łatwa do zainstalowania, ponieważ wymaga tylko kliknięcia przycisku instalacji i skonfigurowania całej funkcjonalności w menu wtyczki. Przed dokonaniem wyboru należy zachować ostrożność, ponieważ dzięki niemu można łatwo kupić wirusa na stronie. Najbardziej popularną 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 będzie bardzo łatwo zindywidualizować przycisk "up" dla witryny w Wordpress. Nie trzeba zmieniać wszystkich wartości, wystarczy tylko skonfigurować typ 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, który polega na tym, że każda zainstalowana wtyczka ładuje CMS. Może to wpłynąć na wydajność zasobu online. Dlatego większość właścicieli witryn próbuje wprowadzić wszystkie zmiany bezpośrednio w kodzie, zamiast korzystać z rozszerzeń stron trzecich. Możesz zrobić przycisk "w górę" dla witryny w HTML, który minimalizuje zużyte zasoby. Zanim zmienisz wszystkie pliki systemowe Wordpress, upewnij się, że mają one kopię zapasową. Następnie możesz zarządzać wszystkimi krokami, aby utworzyć własny przycisk, opisany powyżej.

Knop "up" dla Joomla

CMS Joomla obsługuje również instalowanie wtyczek, takich jak Wordpress. Najbardziej udaną wersją przycisku "up" dla witryny na Joomla 3 jest rozszerzenie o nazwie Top of the Page. W tym systemie CMS dowolna wtyczka może zostać zainstalowana za pośrednictwem "Menedżera"Rozszerzenia. " Aby to zrobić, musisz:

pobrać wtyczkę do Internetu;

Kliknij przycisk Przeglądaj w programie Extension Manager;

wybierz pobrane archiwum;

Kliknij "Pobierz" i zainstaluj.

Teraz musisz aktywować w "Menedżerze wtyczek". Aby to zrobić, musisz przejść do tej sekcji, znaleźć wtyczkę i zmienić jej stan na "włączony". Poniżej znajduje się konfiguracja wszystkich opcji rozszerzeń za pomocą tej samej sekcji, w której musisz znaleźć "Podstawowe ustawienia" tej wtyczki po prawej stronie. Góra strony ma następującą funkcję:

Uruchom /administrator - Włącz opcję nie tylko w zasobach internetowych, ale także w samym panelu Joomla CMS.

Pozycja odkrywania przycisku - liczba pikseli, które użytkownik powinien cofnąć, aby pojawił się przycisk "w górę".

Tekst przycisku pominięcia - obecność tekstu na przycisku.

Zawsze na wierzchu - Strona witryny będzie zawsze wyświetlana od początku. Podczas korzystania z zakotwiczeń nie trzeba aktywować tej opcji, aby przewinąć do określonej lokalizacji na stronie.

Płynne przewijanie - powoduje płynniejsze przewijanie strony.

Czas przewijania - czas, przez który strona przesuwa się całkowicie na samą górę.

Przewijanie - dodaje przewijanie do dużych efektów wizualnych.

Usprawnienie przejścia - "osłabienie" przejścia na górę strony.

Lokalizacja łącza - lokalizacja ikony. Domyślnie przycisk znajduje się w prawym dolnym rogu.

Użyj stylów to indywidualny styl przycisku, który można ustawić w polu poniżej. Jeśli zostanie przełączona na wartość ujemną, wszystkie arkusze stylów zostaną pobraneaktywny temat strony.

Styl łącza to pole do wpisywania ustawień stylu przycisków.

Aby niezależnie skonfigurować styl przycisku "w górę", musisz mieć przynajmniej minimalną wiedzę na temat CCS. W przeciwnym razie konieczne jest przełączenie wartości parametru "ostatni do ostatniego" na "Nie". Innym ważnym niuansem jest to, że zwykły napis na ikonie zawiera tekst w języku angielskim: Return to Top. W rosyjskojęzycznej witrynie taki tekst nie może być, więc po prostu wyłącz go w ustawieniach wtyczki lub zmień na rosyjski. Aby zmienić tę wstawkę, musisz zalogować się do serwera lokacji przy użyciu wbudowanego hosta FTP lub menedżera plików. Następnie katalog "/administrator /language /en-GB /" musi znaleźć plik o nazwie "en-GB.plg_system_topofthepage.ini". Przed zmianą tekstu musisz zmienić kodowanie tego dokumentu na UTF-8. Umożliwi to normalne wyświetlanie rosyjskich liter. Następnie znaleźć tę linię:

„PLG_SYS_TOPOFTHEPAGE_GOTOTOP =” Powrót do góry „”

oraz zmianę frazę w cudzysłowie do rosyjskiego. Możesz używać zwrotów takich jak "Up!", "Beginning!" Lub "Up!". Na końcu musisz zapisać zmodyfikowany plik i sprawdzić obecność przycisku "w górę" witryny na Joomli.

Przycisk "Up" dla Ucoz

Przyciski "w górę" witryny na Ucoz będą musiały zostać wykonane za pomocą implementacji kodu, ponieważ nie jest możliwe podłączenie wtyczek do tego CMS. Jednak aby to zrobić, nie musisz długo sprawdzać plików systemowych i szukać niezbędnych wierszy, wystarczy wstawić mały kod we właściwym miejscu. Aby zainstalować, będziemy potrzebować:

Przejdź do Panelu sterowania - & gt;Wyświetl - & gt; Zarządzanie projektami (szablony) - & gt; Dolna część witryny;

wstaw skrypt (można go znaleźć na oficjalnej stronie projektu i zasobów stron trzecich).

Podsumowanie

Następnie w prawym dolnym rogu pojawia się ikona, która przenosi użytkownika na górę strony. Jak widać, zainstalowanie przycisku "Up" dla dowolnego CMS nie było szczególnie trudne. Możesz użyć zarówno automatycznej metody instalacji (wtyczki), jak i instrukcji. Ostatnia opcja pozostaje jednak najbardziej odpowiednia, ponieważ nie ma negatywnego wpływu na wydajność witryny. Możesz użyć przycisku "w górę" dla witryny w HTML, aby zmaksymalizować zużycie zasobów witryny, ponieważ duża liczba rozszerzeń może mieć negatywny wpływ na wydajność zasobu. Wtyczka do jednego przycisku nie ma większego wpływu na czas ładowania stron witryny, ale w większości przypadków użytkownik ma co najmniej dziesięć wtyczek zainstalowanych w systemie CMS. W takim przypadku każda wtyczka może negatywnie wpłynąć na wydajność stron witryny.