Sayt üçün "yuxarı" düyməsi kimi funksiya internet resursunu ziyarətçiləri üçün daha rahat edir. Səhifənin istənilən yerindən səhifənin yuxarısına asanlıqla keçməyə kömək edir. Bu, uzun müddət aşağı sürüşdürməyi tələb edən böyük məqalələri olan onlayn mağazalar və saytlar üçün zəruridir.
Nə üçündür
Hazırda əksər saytlarda "yuxarı" düyməsi kimi funksiya yoxdur və bunda kritik heç nə yoxdur. Lakin onun istifadəsi həm internet resursu, həm də onun ziyarətçiləri üçün bir çox üstünlüklər gətirə bilər.
Ziyarətçilər üçün üstünlük
Bu, tez-tez İnternet resursunun səhifəsi informasiya ilə çox yükləndikdə, informasiya məqaləsi çox yer tutduqda və siçan təkəri ilə səhifəni aşağı sürüşdürməli olduqda baş verir. Bundan əlavə, məqalənin sonunda bununla bağlı çoxlu şərhlər ola bilər.
Ziyarətçi məqaləni oxuyanda səhifəni aşağı sürüşdürməkdə yorucu heç nə yoxdur, lakin mətn bitdikdə və siz yuxarıya doğru hərəkət etməli olduqda, bir az yorucu olmağa başlayır. Əksər insanlar sadəcə olaraq uzun müddət sürüşdürmək üçün çox tənbəl olacaqlar və saytın geniş ərazilərini gəzmək əvəzinə sadəcə onu bağlayacaqlar.
Düymədən istifadə etməkləani olaraq səhifənin yuxarısına keçmək saytda vaxt keçirməyi daha rahat edir.
İnternet resursundan faydalanın
Resursun özü üçün müsbət cəhətlər keçmiş faktorlardan irəli gəlir, çünki daha asan sayt naviqasiyası davranış amillərini yaxşılaşdırır, çünki bütün ziyarətçilər öz fəaliyyətlərində daha aktiv olacaqlar və digər səhifələrə keçəcəklər.
Beləliklə, bu davranış amilləri bütün axtarış sistemlərinin sayta münasibətinə təsir edir və axtarış nəticələrində mövqenin yaxşılaşmasına səbəb olur.
Saytda "yuxarı" düyməsini özünüz necə düzəltmək olar
Daha çox məşğul oluruq. Yalnız bir neçə sadə addımı yerinə yetirməklə siz istənilən vaxt CMS-dən hər hansı birində sayt üçün yuxarı sürüşdürmə düyməsi yarada bilərsiniz:
- şəkil yaradılması;
- skript yaratmaq;
- düymə üslubu yaradın;
- sayta əlavə olunur.
Düymə şəkli
Saytda "yuxarı" düyməsi əlavə etmək üçün əvvəlcə ikonanın özünü düzəltməlisiniz, kliklədikdə istifadəçi səhifənin yuxarı hissəsinə keçəcək. Bunun üçün hazır variantlardan istifadə edə bilərsiniz, onların arasından hər zaman ən uyğununu seçə bilərsiniz.
Düymənin görünüşünü yaxşılaşdırmaq üçün bəzi təkmilləşdirmələr etməliyik, yəni CSS əsasında fon şəkillərini birləşdirməyə və bununla da onlardan animasiya yaratmağa imkan verən sprayt hazırlamalıyıq.
Qrafik işlər üçün istənilən redaktordan istifadə edə bilərsiniz. Ancaq ən əlverişli seçim onlayn xidmət olardı. PIXLR, çünki burada endirmək üçün heç nə yoxdur və siz onu birbaşa brauzerinizdə istifadə edə bilərsiniz.
Başlamaq üçün görünən redaktor pəncərəsində "Şəkli kompüterdən yükləyin" sahəsini seçin. Nümunə olaraq raket şəklini götürək.
Seçilmiş ikonanın ölçüləri çox böyükdürsə, onda siz kiçik ölçülü tənzimləmə etməlisiniz. Bunu etmək üçün yuxarı menyuya keçin və "Düzəliş" sahəsini seçin və "Pulsuz çevrilmə …"
Sonra, şəklin yanında xüsusi markerlər görünür, siz şəklin ölçüsünü dəyişə bilərsiniz. Proporsiyaları qorumaq üçün Shift düyməsini istifadə edə bilərsiniz, mavi markerləri hərəkət etdirmək lazımdır. Bu addımların sonunda raketin şəkli əldə edilir.
Növbəti addım qatın surətini yaratmaqdır.
İndi siz raketin şəklini yeni təbəqədən bir qədər yuxarı köçürməlisiniz. Bunun üçün sol menyunun ikinci sütununda yerləşən hərəkət alətindən və klaviaturada yuxarı oxundan istifadə etmək rahat olacaq.
İndi yuxarıdakı şəkli ağ-qara etmək lazımdır. Bu, yuxarı menyuda "Düzeltmə" - "Rəng / Doyma" maddəsini istifadə edərək edilə bilər. Tam desaturasiya üçün Doyma slayderi -100-ə təyin edilməlidir. Bu hərəkət sizə "Yuxarı" düyməsinin üzərinə gətirdiyiniz zaman qara-ağdan rəngə çevriləcəyi effekt yaratmağa imkan verəcək.
Son toxunuş iki şəkil ətrafında əlavə boşluqların silinməsidir. Bunu etmək üçün sol menyudan "Kəsmə" maddəsini seçin vədüzbucaqlıda yalnız iki raket seçirik. Kəsməni yerinə yetirmək üçün Enter düyməsi sıxılır.
Nəticə əlavə boş yer olmayan bir şəkildir. Yaranan şəklin enini və hündürlüyünü yazmalısınız, çünki bu məlumatlar növbəti addımda faydalı olacaq.
Saxlamaq üçün "Fayl" - "Saxla" düyməsini sıxmalısınız, burada sol abzasda "Kompüterim" şəklin adını yazırıq (yalnız İngilis dili düzeni), formatı seçin (bu vəziyyətdə halda, PNG) və "Bəli" düyməsini klikləyin.
"yuxarı" düyməsinin skripti ilə fayl
Bu halda skript yazmağa ehtiyac yoxdur. Hazır kodda bəzi düzəlişlər etməklə ictimai versiyadan istifadə etmək mümkün olacaq.
Bunu etmək üçün hər hansı kod redaktorunu yükləməlisiniz. Ən populyar və eyni zamanda pulsuz seçim Notepad++-dır. Onu quraşdırdıqdan sonra bütün bu kodu kopyalayıb ona yapışdırmalısınız:
| $(sənəd).ready(funksiya(){ $(pəncərə).scroll(funksiya () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} başqa {$('scroller').fadeOut();}}); $('scroller').click(funksiya () {$('body, html').animate({scrollTop: 0}, 400); yalanı qaytarın;}); }); |
Sonra, yuxarı menyuda "Fayl" - "Fərqli saxla…" üzərinə klikləyin, bundan sonra kodu.js formatında saxlayırıq. Bundan sonra siz FTP bağlantısından istifadə edərək skript faylları və şəkilləri yükləməklə bu kodu saytınızda istifadə edə bilərsiniz.
Saytda quraşdırın
Sayt üçün yuxarı sürüşdürmə düyməsini qurmaq üçün siz yerləşdirməlisiniztələb olunan yer kodu. Siz onu etiketdən əvvəl daxil etməlisiniz.
CSS ilə Düymə Üslubu Yaradılır
Əksər hallarda sayt üçün "yuxarı" düyməsi aşağıda (" alt-bilgi") yerləşir.
Aşağıdakı kod saytın style.css faylına əlavə edilməlidir:
|
/Yuxarı Düymə/ .scrollTop{ background:url('images/up.png') 0 0 təkrarsız;/doğma şəkil yolu/ width:39px;/ düyməsi en/ height:96px;/50% düymə hündürlüyü/ alt:5px;/sabit vəziyyətdə alt dolgu/ left:89%;/sola sürüşdürün/ }.scrollTop:hover{ background-position:0 -108px; } /fon ofseti/" |
Bu halda həmin təsvirin eni və hündürlüyü məlumatları lazım olacaq. Yalnız alınan məlumatları koda daxil etmək qalır və sayt üçün "yuxarı" düyməsi hazır olacaq! Başqa nə?
Wordpress saytı üçün yuxarı düymə
Bu CMS üçün "Yuxarı" düyməsi həm plaginlərdən istifadə etməklə, həm də müstəqil olaraq edilə bilər.
Pluginlər metodu ən rahat və quraşdırmaq asandır, çünki o, yalnız quraşdırma düyməsini klikləməyi və plagin menyusunda bütün funksiyaları konfiqurasiya etməyi tələb edir.
Sonuncunun seçiminə ehtiyatla yanaşmaq lazımdır, çünki onunla saytda virus əldə etmək asan olacaq. Ən populyar və sübut edilmiş variant Scroll Back To Top adlı plagindir. Siz onu Wordpress plaginləri üçün standart axtarışdan istifadə edərək endirə bilərsiniz.
Bu artırma varçox funksionallıq və Wordpress saytı üçün "yuxarı" düyməsini fərdiləşdirmək çox asan olacaq. Bütün dəyərləri dəyişdirmək lazım deyil, sadəcə sayt səhifəsində düymənin görünüşünü və yerini konfiqurasiya etməlisiniz.
Gördüyünüz kimi, plaginlərlə quraşdırma düyməsini qurmaq çox asandır. Ancaq bir vacib nüans var, o da hər bir quraşdırılmış plagin CMS-i yükləyir. Bu, İnternet resursunun sürətinə təsir göstərə bilər. Buna görə əksər sayt sahibləri bütün dəyişiklikləri üçüncü tərəf uzantılarının köməyi ilə deyil, birbaşa kodda etməyə çalışırlar. Siz HTML saytı üçün "yuxarı" düyməsi yarada bilərsiniz ki, bu da istehlak olunan resursları minimuma endirəcək.
Bütün Wordpress sistem fayllarını dəyişməzdən əvvəl onların ehtiyat nüsxəsini çıxarmalısınız. Sonra yuxarıda təsvir edilən öz düymənizi yaratmaq üçün bütün addımları izləyə bilərsiniz.
Joomla üçün "yuxarı" düyməsi
CMS Joomla həmçinin Wordpress kimi plaginlərin quraşdırılmasını dəstəkləyir. Joomla 3-də sayt üçün "yuxarı" düyməsinin ən uğurlu versiyası Səhifənin Başı adlı genişləndirmədir.
Bu CMS-də istənilən plagin "Genişləndirmə Meneceri" vasitəsilə quraşdırıla bilər. Bunun üçün sizə lazımdır:
- plugini İnternetdə endirin;
- genişləmə menecerində "Gözdən keçir" düyməsini klikləyin;
- endirilmiş arxivi seçin;
- "Endir" üzərinə klikləyin və quraşdırın.
İndi siz onu "Plugin Manager"-də aktivləşdirməlisiniz. Bunun üçünbu bölməyə keçməli, plaqini tapmalı və onun statusunu "aktiv" vəziyyətinə keçirməlisiniz.
Növbəti addım sağ tərəfdə bu plaqinin "Əsas parametrlərini" tapmaq üçün lazım olan eyni bölmədən istifadə edərək bütün genişləndirmə parametrlərini konfiqurasiya etməkdir.
Səhifənin yuxarı hissəsi aşağıdakı funksiyaya malikdir:
- İdarəçidə işə salın - seçimi təkcə İnternet resursunda deyil, həm də Joomla CMS panelində aktivləşdirin.
- Düymə Açıqlama Mövqeyi - yuxarı düymənin görünməsi üçün istifadəçi neçə piksel geri çəkməlidir.
- Düymə mətnini buraxın - düymədə mətnin olması.
- Həmişə Yuxarıda - sayt səhifəsi həmişə yuxarıdan göstəriləcək. Səhifədə müəyyən yerə keçmək üçün lövbərlərdən istifadə edərkən bu seçimin aktivləşdirilməsinə ehtiyac yoxdur.
- Smooth Scroll - səhifə sürüşdürməsini daha hamar edir.
- Scroll Müddəti - bundan sonra səhifənin tamamilə başlanğıca keçəcəyi vaxt.
- Scroll Transition - Sürüşməyə daha çox vizual effektlər əlavə edir.
- Keçid Yüngülləşdirmə - səhifənin yuxarısına doğru hərəkəti "zəiflədir".
- Link Məkanı - işarənin yeri. Defolt olaraq, düymə aşağı sağ küncdə yerləşir.
- Üslublardan istifadə edin – aşağıdakı sahədə təyin oluna bilən fərdi düymə stili. Mənfi dəyərə keçilərsə, bütün üslub parametrləri saytın aktiv mövzusundan götürüləcək.
- Link Style - düymə tərzi parametrlərinizi daxil etmək üçün sahə.
"Yuxarı" düyməsinin üslubunu fərdiləşdirmək üçün sizdə ən azı minimal olmalıdırCCS biliyi. Əks halda, siz sondan əvvəlki parametrin dəyərini "Xeyr"ə dəyişməlisiniz.
Digər vacib nüans odur ki, ikonadakı adi yazıda ingiliscə mətn var: Yuxarıya qayıt. Bu cür mətn rusdilli saytda ola bilməz, ona görə də siz sadəcə plagin parametrlərində onu deaktiv etməlisiniz və ya rus dilinə dəyişməlisiniz.
Bu yazını dəyişmək üçün siz FTP və ya hostinqdə quraşdırılmış fayl menecerindən istifadə edərək sayt serverinə keçməlisiniz. Sonra "/administrator/language/en-GB/" kataloqunda "en-GB.plg_system_topofthepage.ini" adlı fayl tapmalısınız.
Mətni dəyişməzdən əvvəl bu sənədin kodlamasını UTF-8 ilə dəyişməlisiniz. Bu, rus hərflərinin normal görünməsini təmin edəcək.
Sonra aşağıdakı sətri tapırıq:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Yuxarıya qayıt"" |
və dırnaq içərisindəki ifadəni rus dilinə dəyişin. "Yuxarıya!", "Yuxarıya!" kimi ifadələrdən istifadə edə bilərsiniz. və ya “Yuxarı!”.
Sonunda siz dəyişdirilmiş faylı saxlamalı və Joomla-da sayt üçün "yuxarı" düyməsini yoxlamalı olacaqsınız.
Ucoz üçün yuxarı düymə
Ucoz-da sayt üçün "yuxarı" düyməsi kod inyeksiyasından istifadə etməklə yerinə yetirilməli olacaq, çünki bu CMS üçün plaginləri qoşmaq mümkün deyil. Bununla belə, bunun üçün sistem fayllarının uzun müddət öyrənilməsi və lazımi sətirlərin axtarışı tələb olunmur, sadəcə olaraq kiçik kodu düzgün yerə yapışdırmaq lazımdır.
Bizi quraşdırmaq üçüntələb olunur:
- "İdarəetmə Panelinə -> Dizayn -> Dizayn İdarəetmə (şablonlar) -> Saytın aşağı hissəsinə keçin;
- skripti daxil edin (layihənin rəsmi saytında və üçüncü tərəf resurslarında tapa bilərsiniz).
Nəticə
Bundan sonra sağ alt küncdə istifadəçini səhifənin ən yuxarı hissəsinə daşıyan ikona görünəcək.
Gördüyünüz kimi, hər hansı bir CMS üçün geri düyməsini qurmaq o qədər də çətin deyildi. Həm avtomatlaşdırılmış quraşdırma metodundan (pluginlər), həm də əl ilə istifadə edə bilərsiniz. Bununla belə, sonuncu seçim ən uyğun olaraq qalır, çünki o, saytın fəaliyyətinə mənfi təsir göstərmir.
Sayt resurslarının istehlakını minimuma endirmək üçün HTML saytı üçün "yuxarıya qayıt" düyməsini istifadə edə bilərsiniz, çünki çoxlu sayda genişləndirmə resursun işinə mənfi təsir göstərə bilər. Bir "yuxarı" düyməsi plagini sayt səhifələrinin yüklənmə müddətinə böyük təsir göstərə bilməyəcək, lakin əksər hallarda istifadəçinin CMS-də ən azı onlarla plaqini var. Bu halda istənilən plagin saytın səhifələrinin işinə mənfi təsir göstərə bilər.
