706 Shares 4899 views

Przycisk „w górę” dla witryny: jak zrobić

Taka funkcja, przycisk „w górę” na miejscu, dzięki czemu bardziej dogodnym zasobów Internetu dla swoich gości. Pomaga łatwo poruszać się w dowolnym miejscu na stronie w górnej części. Jest to pozycja obowiązkowa dla sklepów internetowych i stron z dużych przedmiotów, które wymagają długiego przewijania w dół.

Dlaczego jest to konieczne

W tej chwili większość witryn tej funkcji, przycisk „w górę” nie jest i nie ma nic krytyczna. Ale jego stosowanie może przynieść wiele korzyści zarówno dla zasobów Internetu i jego użytkowników.

Korzyści dla użytkowników

Często, gdy strona zasobu internetowego jest mocno załadowany ilości informacji, gdy wyrób informacji zajmuje dużo miejsca i trzeba przewinąć stronę w dół za pomocą kółka myszy. Plus do tego, na końcu artykułu może stwarzać wiele uwag do niego.

Kiedy użytkownik czyta artykuł w osobistym żmudnego przewijania strony nie jest obecny, ale gdy tekst dobiegła końca i konieczne jest, aby poruszać się, to zaczyna męczyć trochę. Większość ludzi po prostu zbyt leniwy, aby prowadzić długi zwój, a oni po prostu zamknąć stronę, zamiast innego spacer po otwartych przestrzeniach.

Korzystanie z przycisku, aby natychmiast przejść do góry strony sprawia, że rozrywka w miejscu bardziej wygodne.

Korzyści z zasobów Internetu

Pozytywne aspekty zasobu sama na podstawie czynników historycznych, ponieważ jest łatwiejsza w nawigacji witryna poprawia czynniki behawioralne, jak wszyscy odwiedzający będą bardziej aktywne w swoich działaniach i przenieść do innych stron.

Tym samym dane czynniki behawioralne wpływ na postawę wszystkich wyszukiwarek na miejscu i doprowadzić do poprawy miejsca w wynikach wyszukiwania.

Jak zrobić przycisk „Up” na stronie internetowej sam

Są badane dalej. Przycisk do przewijania w górę do witryny, aby którykolwiek z CMS zawsze można stworzyć swój własny, wykonując kilka bardzo prostych kroków:

  • tworzenia obrazu;
  • stworzenie skryptu;
  • Tworzenie stylu przycisku;
  • dodanie do serwisu.

przycisk obrazu

Aby dodać „w górę” na stronie, na potrzeby zacząć zarabiać sama ikona po kliknięciu użytkownik przesunie się na stronę. Można skorzystać z gotowych opcji, wśród których zawsze możemy wybrać najbardziej odpowiednie.

Aby poprawić wygląd przycisku, trzeba dokonać pewnych ulepszeń, a mianowicie, aby ikonki, pozwala CSS oparte łączyć obrazy tła, a tym samym, że stworzył krótką animację.

Do prac graficznych, można użyć dowolnego edytora. Ale najbardziej wygodnym rozwiązaniem jest usługa online Pixlr, ponieważ nie ma nic do pobrania i nie ma potrzeby, można używać ich bezpośrednio w przeglądarce.

Aby rozpocząć pracę w edytorze okna, aby wybrać „Prześlij obraz z komputera.” Jako przykład weźmy obraz rakiet.

Jeśli wielkość wybranych ikon są zbyt duże, trzeba będzie dokonać niewielkiej korekty wielkości. Aby to zrobić, „Edycja”, należy przejść do menu głównego, a następnie wybierz pole, a po «Wolne przekształcić …»

Następnie obok obrazie istnieją specjalne znaczniki, które są ruchome, można zmienić rozmiar obrazu. Aby zachować proporcje, można użyć klawisza Shift, uznając, że trzeba przenieść niebieskich znaczników. Na zakończenie tych działań uzyskuje rakiet obraz.

Następnym krokiem – tworzenie kopii warstwy.

Teraz trzeba przenieść obraz z nowych pocisków warstwa się trochę. Aby to zrobić, będzie to wygodny w użyciu narzędzia Move, który znajduje się w drugiej kolumnie po lewej stronie menu, i strzałkę „w górę” na klawiaturze.

Teraz trzeba zrobić górny obraz w czerni i bieli. Można to zrobić za pomocą pozycji „korekta” – „Barwa / Nasycenie” z górnego menu. Pełną przebarwienia suwaka „Nasycenie” należy przyjąć wartość -100. Ta czynność spowoduje, że efekt, że przycisk „Up” zmieni kolor z białego na czarny i kolor po najechaniu na niego.

Ostateczna touch – usunięcie nadmiaru przestrzeni wokół dwóch obrazów. Aby to zrobić, należy wybrać pozycję „Trim” z menu po lewej stronie wybierz tylko dwa pociski do prostokąta. Aby dokonać przycinania naciska klawisz Enter.

Aby uzyskać obraz, w którym nie ma zbyt wiele miejsca. Trzeba nagrać szerokość i wysokość uzyskanych obrazów, jak te dane będą przydatne w następnym kroku.

Aby zapisać trzeba kliknąć na „Plik” – „Zapisz”, gdzie po lewej stronie pod „Mój komputer” wpisać nazwę obrazu (tylko układ klawiatury angielski), wybrać format (w tym przypadku – PNG) i kliknij przycisk „Tak”.

Plik ze skryptem przycisk „Up”

Napisać skrypt, w tym przypadku nie jest konieczne. To będzie możliwe użycie opcji publicznej, przynosząc kilka poprawek kodu gotowy.

Będzie to wymagało, aby pobrać dowolny edytor kodu. Najbardziej popularne i również darmowa wersja – jest Notepad ++. Po instalacji należy skopiować i wkleić cały ten kod:

<Script type = "text / javascript "> $ (document) .ready (function () {$ (okno) .scroll (function () {if ($ (this) .scrollTop ()> 0) {$ ( „# scroller ') fadeIn ();. } else {$ (' # scroller ') Fadeout () ;.}}); $ (' # scroller ') click (function () {$ ('. ciało, html „). animowanie ({scrollTop 0}, 400) zwraca fałsz;}) })

Następnie kliknij w górnym menu „Plik” – „Zapisz jako …”, a następnie zapisać kod w formacie .js. Następnie można użyć tego kodu na swojej stronie przesyłając skrypt i obrazu plików za pomocą połączenia FTP.

Montaż na miejscu

Aby ustawić przycisk przewijania w górę do witryny, musisz umieścić kod w odpowiednim miejscu. Wpisać musi być przed znacznikiem .

Tworzenie stylu przycisk z CSS

Najczęściej „w górę” Przycisk dla witryny znajduje się na dole ( „piwnicy”).

Plik style.css strona, należy dodać następujący kod:

„/ * Przycisk u góry * /

.scrollTop {
background: url ( 'images / up.png ') 0 0 no-repeat; / * onositelny ścieżka do obrazka * /
width: 39px; / * szerokość przycisku * /
Wysokość: 96 pikseli / * 50% wysokości przycisku * /
bottom: 5px; / * stała pozycja marginesu dolnego * /
left: 89%; / * przesunięcie w lewo * /
}
.scrollTop: aktywowania {t pozycji 0 -108px; } / * Offset tło * / "

W tym przypadku dane potrzebne i szerokość i wysokość obrazu. Pozostaje tylko wprowadzić dane w kodzie, a „w górę” Przycisk dla witryny będzie gotowy! Co jeszcze?

Przycisk „w górę” dla strony na WordPress

CMS dla tego przycisku „w górę” może odbywać się za pomocą wtyczek, a także niezależnie od siebie.

Wtyczki najbardziej wygodny i łatwy w instalacji, ponieważ wymagałoby to tylko kliknąć na przycisk zainstalować i skonfigurować wszystkie funkcje menu wtyczki metody.

Przy wyborze tej ostatniej jest podejść z ostrożnością, bo z nim można łatwo nabyć wirusa w miejscu. Najbardziej popularnym i sprawdzonym rozwiązaniem – plug-in o nazwie Scroll Powrót do początku. Można go pobrać za pomocą standardowego wyszukiwania WordPress Wtyczki.

To rozszerzenie ma wiele funkcji i jest bardzo łatwy do zindywidualizować przycisk „do góry” na stronie na WordPress. Wszystkie wartości zmiana niekoniecznie trzeba skonfigurować tylko typ i położenie przycisku na stronie internetowej.

Jak widać, instalacja przycisku „w górę” za pomocą wtyczek jest bardzo prosta. Ale jest jedno istotne zastrzeżenie, które polega na tym, że każdy zainstalowany plug-in ładuje CMS. Może to wpływać na szybkość zasobu internetowego. Dlatego większość właścicieli witryn starają się przeprowadzić wszystkie zmiany bezpośrednio w kodzie, zamiast używać rozszerzeń innych firm. Można dokonać przycisk „Up” w miejscu do HTML, który minimalizacji zużycia zasobów.

Przed zmianą jakiegokolwiek systemu WordPress pliki, należy uczynić je. Następnie można wykonać wszystkie kroki, aby utworzyć przyciski, opisane powyżej.

Domina „w górę” dla Joomla

CMS Joomla obsługuje również instalację wtyczek, takich jak WordPress. Najbardziej udany opcji przycisk „w górę” dla strony na Joomla 3 jest plug-in o nazwie górze strony.

Ten CMS jakiejkolwiek plug-in może być zainstalowany przez „Extensions Manager”. Aby to zrobić:

  • pobranie wtyczki w Internecie;
  • kliknąć na przycisk „Przeglądaj” w menedżerze rozszerzeń;
  • wybierz pobrany plik;
  • kliknąć przycisk „Pobierz” i zainstaluj.

Teraz trzeba go aktywować w „Plugin Managera”. Aby to zrobić, należy przejść do tej sekcji, znajdź wtyczkę i przełączyć swój status na „włączone”.

Następny jest ustawienie opcji rozbudowy przy pomocy tej samej sekcji, gdzie trzeba znaleźć w sekcji „Parametry podstawowe” z tej wtyczki po prawej stronie.

Góra strony posiada następujące cechy:

  • Uruchomić w / administratora – włączenie opcji nie tylko od zasobu internetowego, ale również w panelu CMS Joomla.
  • Przycisk Reveal stanowisko – ile pikseli musi przewinąć użytkownikowi przycisk „w górę” nie.
  • Pominąć przycisk TEXT – tekst przycisku.
  • Zawsze w Top – miejsce cały czas będą wyświetlane od jego początku. Podczas korzystania z „kotwice”, aby przejść do określonej lokalizacji na stronie, ta opcja nie musi być aktywowany.
  • Smooth Scroll – sprawia, że przewijania strona gładsza.
  • Przewiń Czas trwania – czas, po którym strona jest całkowicie przeniósł się do góry.
  • Przewiń Transition – dodaje przewijania dużych efektów wizualnych.
  • Przejście Złagodzenie – «osłabienie” przenieść na górze strony.
  • Link Location – Ikony lokalizacja. Jako standard, przycisk znajdujący się w prawym dolnym rogu.
  • Użyj Style – poszczególne przyciski styl, który można określić w polu poniżej. Jeśli włączone do wartości ujemnej, wszystkie parametry stylów zostanie pobrana z miejsca aktywnego motywu.
  • Styl Link – pole do wpisania przycisk styl ustawień.

Samodostrajanie „UP” stylu, trzeba mieć przynajmniej minimalną wiedzę o CCS. W przeciwnym razie, należy zmienić wartość parametru przedostatnim „Nie”.

Jest jeszcze jedna ważna rzecz to, że zwykły napis na ikonę zawiera tekst w języku angielskim: powrót do początku. Na stronie rosyjskiej podobny tekst nie może być obecny, więc należy po prostu wyłączyć go w parametrach wtyczki nic zmieniać w rosyjskim.

Aby zmienić etykiety trzeba iść do serwera witryny przy użyciu wbudowanego serwera FTP lub hosting menedżera plików. Dalej w katalogu «/ Administrator / language / en-GB /» trzeba znaleźć plik o nazwie «en-GB.plg_system_topofthepage.ini».

Przed zmianą tekstu należy zmienić kodowanie dokumentu na UTF-8. Pozwoli to na normalne wyświetlanie rosyjskich liter.

Następnie znajdujemy następujący wiersz:

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

i zmienić frazę w cudzysłowie w języku rosyjskim. Można użyć wyrażeń takich jak „Up”, „Start!” Albo „Up!”.

Na koniec należy zapisać zmodyfikowany plik i sprawdzić przycisków „w górę” dla witryny na Joomla.

Przycisk „w górę” dla uCoz

Przycisk „w górę” dla strony na uCoz mieć do czynienia z wprowadzeniem kodu, ponieważ wtyk połączeniowy do tego CMS jest niemożliwe. Jednak to nie wymaga dużo czasu, aby nauczyć się pliki systemowe i szukać niezbędnych linii musi wstawić tylko mały kod w odpowiednim miejscu.

W przypadku instalacji, musimy:

  • przejdź do „Panel sterowania -> Projekt -> Design Management (szablony) -> dolna część strony;
  • Wstawianie skryptu (można znaleźć na oficjalnej stronie internetowej projektu i zewnętrznych zasobów).

wniosek

Po tym, w prawym dolnym rogu pojawi się ikona, przenieść użytkownika na samej górze strony.

Jak widać, instalacja przycisk „Up” na którekolwiek z CMS nie było szczególnie trudne. Może być używany jako zautomatyzowanej metody instalacji (plug-ins) i instrukcji. Jednak ta ostatnia opcja jest najbardziej właściwe, gdyż nie wpływa negatywnie na wydajność witryny.

Można korzystać z „góry” na stronie HTML, aby zminimalizować zużycie zasobów witryny, jak duża liczba rozszerzeń może mieć negatywny wpływ na wydajność zasobów. Plug-in przycisk „w górę” nie będzie znacząco wpływać na czas wczytywania stron, ale w większości przypadków użytkownik jest obecnych co najmniej kilkanaście wtyczek zainstalowanych w systemie CMS. W tym przypadku wszelkie plug-in może niekorzystnie wpłynąć na wydajność swoich stron.