SZUKAJ

Przycisk "W górę" witryny: jak to zrobić

Taka funkcja jak przycisk w górę strony,sprawia, że ​​zasoby online są wygodniejsze dla odwiedzających. Pomaga łatwo przejść z dowolnego miejsca na stronie do góry. Jest to po prostu konieczne dla sklepów internetowych i stron internetowych z dużymi artykułami, które wymagają długiego przewijania w dół.

Po co to jest?

W tej chwili na większości witryn takichnie ma funkcji takiej jak przycisk "w górę" i nie ma w tym nic krytycznego. Ale jego wykorzystanie może przynieść wiele korzyści zarówno dla zasobów internetowych, jak i dla odwiedzających.

Korzyści dla odwiedzających

Często zdarza się, gdy strona zasobów internetowychmocno obciążony informacjami, gdy artykuł informacyjny zajmuje dużo miejsca i musisz przewinąć stronę w dół za pomocą kółka myszy. Oprócz tego pod koniec artykułu może być wiele komentarzy na ten temat.

Kiedy odwiedzający czyta artykuł, nicnie ma żmudnego przewijania strony, ale kiedy tekst dobiega końca, a ty musisz się podnieść, zaczyna się trochę męczyć. Większość ludzi będzie po prostu zbyt leniwych, aby długo się przewijać, a oni po prostu zamkną witrynę, zamiast chodzić po jej przestrzeniach.

Za pomocą przycisku, aby natychmiast przejść na górę strony, wygodniejsze będzie przeglądanie witryny.

Korzyści dla zasobu internetowego

przycisk do strony

Pozytywne aspekty dla samego źródła emanująz czynników przeszłych, 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.

Tak więc te czynniki behawioralne wpływają na nastawienie wszystkich wyszukiwarek do witryny i prowadzą do poprawy miejsca w wynikach wyszukiwania.

Jak samemu zrobić przycisk "do góry" na stronie

przycisk do strony html

Rozumiemy dalej. Przycisk przewijania w górę strony w dowolnym systemie CMS można zawsze wykonać niezależnie, wykonując kilka bardzo prostych kroków:

  • tworzenie obrazu;
  • tworzenie skryptów;
  • tworzenie stylu przycisku;
  • dodawanie do witryny.

Obraz przycisku

Aby dodać przycisk w górę na stronie internetowej, dlaRozpocznij tworzenie samej ikony, po kliknięciu użytkownik przejdzie w górę strony. Do tego można użyć gotowych opcji, spośród których zawsze można wybrać najbardziej odpowiedni.

Aby poprawić wygląd przycisku, konieczne jest wprowadzenie pewnych ulepszeń, a mianowicie stworzenie sprite'a, umożliwiającego scalanie obrazów tła w CSS, tworząc w ten sposób animację.

Do pracy graficznej możesz użyć dowolnego edytora. Ale najwygodniejszą opcją byłaby usługa online PIXLR, ponieważ nie trzeba tutaj niczego pobierać i można jej używać bezpośrednio w przeglądarce.

Aby rozpocząć pracę w wyświetlonym oknie edytora, wybierz pole "Załaduj obraz z komputera". Jako przykład, weź obraz rakiety.

jak zrobić przycisk na stronie

Jeśli wymiary wybranej ikony są zbyt duże, totrzeba dokonać niewielkiej korekty rozmiaru. Aby to zrobić, przejdź do górnego menu i wybierz pole "Edytuj", a następnie "Bezpłatne przekształcenie ..."

Dalej, obok zdjęcia są specjalneznaczniki, które można przesuwać w celu zmiany rozmiaru obrazu. Aby zachować proporcje, możesz użyć klawisza Shift, trzymając, który chcesz przenieść niebieskie znaczniki. Na końcu tych działań uzyskano obraz rakiety.

Następnym krokiem jest utworzenie kopii warstwy.

Teraz musisz przenieść obraz rakiety znowa warstwa trochę. W tym celu wygodne będzie użycie narzędzia przesuwania, które znajduje się w drugiej kolumnie lewego menu, oraz strzałki w górę na klawiaturze.

Teraz musisz zrobić zdjęcie czarno-białe. Można to zrobić za pomocą opcji "Korekta" - "Barwa / Nasycenie" w górnym menu. W celu pełnego wybielenia suwak Nasycenie powinien być ustawiony na -100. Ta czynność pozwoli Ci uzyskać efekt, w którym przycisk "W górę" zmieni kolor z czarno-białego na kolorowy po najechaniu na niego kursorem myszy.

Ostatnim akcentem jest usunięcie dodatkowej przestrzeni.około dwóch zdjęć. Aby to zrobić, wybierz pozycję "Przytnij" z lewego menu i wybierz tylko dwie rakiety w prostokącie. Aby wykonać przycinanie, naciśnij klawisz Enter.

Okazało się, że obraz, w którym nie ma nadmiaru przestrzeni. Będziesz musiał zarejestrować szerokość i wysokość wynikowego obrazu, ponieważ dane te będą przydatne w następnym kroku.

jak zrobić przycisk na stronie

Aby zapisać, musisz kliknąć "Plik" -"Zapisz", gdzie w lewym elemencie "Mój komputer" zapisujemy 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 pisanie skryptu nie jest konieczne. Będzie można skorzystać z publicznie dostępnej opcji, wprowadzając poprawki do gotowego kodu.

Aby to zrobić, musisz pobrać dowolny edytor kodu. Najbardziej popularną i bezpłatną opcją jest Notepad ++. Po zainstalowaniu musisz skopiować i wkleić cały ten kod:

<script type = "text / javascript"> $ (dokument).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;} );}); </ script>

Następnie kliknij w górnym menu "Plik" - "Zapiszjako ... ", po czym zapisujemy kod w formacie .js. Następnie możesz użyć tego kodu w swojej witrynie internetowej, przesyłając do niego pliki skryptów i obrazy za pomocą połączenia FTP.

Instalacja na stronie

Aby ustawić przycisk przewijania strony, musisz umieścić kod w żądanym miejscu. Musisz wprowadzić go przed tagiem .

Tworzenie stylu przycisków w CSS

Najczęściej przycisk "w górę" witryny znajduje się u dołu ("piwnica").

Poniższy kod należy wprowadzić w pliku style.css witryny:

"/ * Przycisk w górę * /

.scrollTop {
background: url ("images / up.png") 0 0 no-repeat; / * odpowiednia ścieżka do obrazu * /
szerokość: 39px; / * szerokość przycisku * /
wysokość: 96px; / * 50% wysokości przycisku * /
u dołu: 5 pikseli; / * w ustalonej pozycji, wcięcie u dołu * /
lewo: 89%; / * przesunięcie w lewo * /
}
.scrollTop: hover {background-position: 0 -108px; } / * offset tła * / "

W takim przypadku potrzebujemy szerokości i wysokości obrazu. Pozostaje tylko wprowadzić dane w kodzie, a przycisk "w górę" dla strony będzie gotowy! Co jeszcze?

Wordpress Up Button dla witryny Wordpress

jak zrobić przycisk na stronie

W przypadku tego CMS, przycisk "Up" może być wykonany za pomocą wtyczek, a także niezależnie.

Metoda z wtyczkami jest najwygodniejsza i łatwa do zainstalowania, ponieważ wystarczy kliknąć przycisk instalacji i skonfigurować wszystkie funkcje w menu wtyczek.

Wybierając ten ostatni powinien przyjść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 wielefunkcjonalność i będzie bardzo łatwo zindywidualizować przycisk "w górę" dla witryny Wordpress. Nie ma potrzeby zmiany wszystkich wartości, wystarczy tylko skonfigurować wygląd i lokalizację przycisku na stronie witryny.

Jak widać, ustawianie przycisku up zwtyczki są bardzo proste. Ale jest jeden ważny niuans, który polega na tym, że każda zainstalowana wtyczka ładuje CMS. Może to wpływać na szybkość zasobu internetowego. Dlatego większość właścicieli witryn próbuje wprowadzić wszystkie zmiany bezpośrednio w kodzie, a nie za pomocą rozszerzeń stron trzecich. Możesz zrobić przycisk "w górę" dla witryny w HTML, co zminimalizuje zużycie zasobów.

Przed modyfikacją wszystkich plików systemowych Wordpress należy wykonać ich kopię zapasową. Następnie możesz wykonać wszystkie kroki, aby utworzyć własny przycisk, opisany powyżej.

Knock Up dla Joomla

przycisk w górę dla strony joomla 3

Joomla CMS obsługuje również instalację wtyczek, podobnie jak Wordpress. Najbardziej udaną opcją przycisku up w witrynie Joomla 3 jest rozszerzenie o nazwie Top of the Page.

W tym systemie CMS dowolna wtyczka może być zainstalowana za pośrednictwem "Menedżera rozszerzeń". Do tego potrzebujesz:

  • pobierz wtyczkę w Internecie;
  • 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ć, przejdź do tej sekcji, znajdź wtyczkę i przełącz jej stan na "włączony".

Następnie następuje konfiguracja wszystkich parametrów rozszerzenia za pomocą tej samej sekcji, w której musisz znaleźć "Główne parametry" 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 panelu CMS Joomla.
  • Pozycja odsłonięcia przycisku - liczba pikseli, które użytkownik musi odpocząć, aby pojawił się przycisk w górę.
  • Pomiń tekst przycisku - obecność tekstu na przycisku.
  • Zawsze na górze - strona witryny będzie wyświetlana cały czas od początku. Podczas używania kotwic do przewijania do określonego miejsca na stronie ta opcja nie musi być aktywowana.
  • Smooth Scroll - przyspiesza przewijanie strony.
  • Czas przewijania - czas, po którym strona jest całkowicie przesunięta na początek.
  • Przewiń przejście - dodaje przewijanie dużych efektów wizualnych.
  • Usprawnienie przejścia - "łagodzenie" przechodzenia 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żna ustawić w polu poniżej. Jeśli zostanie przełączona na wartość ujemną, wszystkie parametry stylu zostaną pobrane z aktywnego tematu witryny.
  • Styl łącza - pole do wprowadzania własnych parametrów stylu przycisków.

Aby samodzielnie dostroić styl przycisku "w górę" musisz mieć przynajmniej minimalną wiedzę o CCS. W przeciwnym razie warto zmienić wartość przedostatniego parametru na "Nie".

Innym ważnym niuansem jest tozwykle napis na ikonie zawiera tekst w języku angielskim: Return to Top. Na rosyjskojęzycznej stronie taki tekst nie może być obecny, więc powinieneś go po prostu wyłączyć w ustawieniach wtyczki lub zmienić na rosyjski.

Aby zmienić ten napis, musisz przejść doserwer lokacji za pomocą FTP lub menedżera plików osadzonego w hostingu. Następnie, w katalogu "/ administrator / language / en-GB /", musisz znaleźć plik o nazwie "en-GB.plg_system_topofthepage.ini".

Przed zmianą tekstu zmień kodowanie tego dokumentu na utf-8. Spowoduje to normalne wyświetlanie rosyjskich liter.

Następnie znajdujemy tę linię:

"PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Powrót do początku ""

i zmień zdanie w cudzysłowie na rosyjski. Możesz używać zwrotów takich jak "Up!", "Top!" Lub "Up!".

Na koniec będziesz musiał zapisać zmodyfikowany plik i sprawdzić obecność przycisku "do góry" dla witryny Joomla.

Ucoz up button

przewiń w górę na stronie

Przycisk u góry strony Ucoz będzie musiał zostać ukończonyza pomocą wstrzyknięcia kodu, ponieważ wtyczek nie można podłączyć do tego CMS. Jednak nie zajmuje wiele czasu na badanie plików systemu i poszukiwanie niezbędnych linii, wystarczy wstawić mały kod w wymaganym miejscu.

Do instalacji potrzebujemy:

  • przejdź do "Panel sterowania -> Projektowanie -> Zarządzanie projektami (szablony) -> Spód witryny;
  • wstaw skrypt (można go znaleźć na oficjalnej stronie projektu i zasobów stron trzecich).

Wniosek

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

Jak widać, instalacja przycisku "W górę" dlaktórykolwiek z CMS nie był szczególnie trudny. Może być stosowany jako automatyczna metoda instalacji (wtyczki) i instrukcja obsługi. Jednak ta ostatnia opcja pozostaje najbardziej odpowiednia, ponieważ nie wpływa negatywnie na szybkość witryny.

Możesz użyć przycisku w górę dla witryny naHTML, aby zminimalizować zużycie zasobów witryny, ponieważ duża liczba rozszerzeń może mieć negatywny wpływ na szybkość zasobu. Jedna wtyczka przycisku "w górę" nie będzie miała 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 w witrynie.

  • Ocena: