Sayt uchun "yuqoriga" tugmasi kabi funksiya internet-resursni tashrif buyuruvchilar uchun qulayroq qiladi. Bu sahifaning istalgan joyidan sahifaning yuqori qismiga osongina o'tishga yordam beradi. Bu internet-doʻkonlar va katta maqolalarga ega boʻlgan saytlar uchun shart.
Bu nima uchun
Hozirda aksariyat saytlarda "yuqoriga" tugmasi kabi funksiya yo'q va bunda muhim narsa yo'q. Ammo undan foydalanish Internet-resurs uchun ham, tashrif buyuruvchilar uchun ham ko'p afzalliklarni keltirishi mumkin.
Tashrif buyuruvchilar uchun imtiyozlar
Bu koʻpincha Internet-resurs sahifasi maʼlumotlarga koʻp yuklanganda, axborot maqolasi koʻp joy egallaganda va sichqonchaning gʻildiragi bilan sahifani pastga aylantirish kerak boʻlganda sodir boʻladi. Bunga qo'shimcha ravishda, maqola oxirida u haqida ko'plab sharhlar bo'lishi mumkin.
Tashrifchi maqolani oʻqiganda, sahifani pastga aylantirishda hech qanday zerikarli narsa yoʻq, lekin matn tugagach va siz yuqoriga koʻtarilishingiz kerak boʻlganda, u biroz charchay boshlaydi. Aksariyat odamlar uzoq vaqt varaqlashga dangasa bo‘lishadi va ular saytni boshqa kezish o‘rniga, shunchaki yopishadi.
Tugmasini ishlatishsahifaning yuqori qismiga bir zumda o'tish uchun saytda vaqt o'tkazish qulayroq bo'ladi.
Internet-resurs uchun imtiyozlar
Resursning oʻzi uchun ijobiy tomonlar oʻtmish omillaridan kelib chiqadi, chunki saytni oson navigatsiya qilish xatti-harakatlar omillarini yaxshilaydi, chunki barcha tashrif buyuruvchilar oʻz harakatlarida faolroq boʻladi va boshqa sahifalarga oʻtadi.
Shunday qilib, bu xatti-harakatlar omillari barcha qidiruv tizimlarining saytga boʻlgan munosabatiga taʼsir qiladi va qidiruv natijalaridagi oʻrni yaxshilanishiga olib keladi.
Saytdagi "to'plash" tugmasini qanday qilib o'zingiz qilishingiz mumkin
Keyinchalik muomala qilish. Bir necha juda oddiy amallarni bajarib, istalgan vaqtda istalgan CMSda sayt uchun yuqoriga aylantirish tugmachasini yaratishingiz mumkin:
- tasvir yaratish;
- skript yaratish;
- tugma uslubini yaratish;
- saytga qoʻshilmoqda.
Tugma tasviri
Saytga "yuqoriga" tugmasini qo'shish uchun avval belgini o'zi qilish kerak, bosilganda foydalanuvchi sahifaning yuqori qismiga o'tadi. Buning uchun siz tayyor variantlardan foydalanishingiz mumkin, ular orasida har doim eng mosini tanlashingiz mumkin.
Tugmaning koʻrinishini yaxshilash uchun biz baʼzi yaxshilanishlarni amalga oshirishimiz kerak, xususan, CSS-ga asoslangan fon tasvirlarini birlashtirish va shu orqali ulardan animatsiya yaratish imkonini beruvchi sprayt yaratishimiz kerak.
Grafik ishlar uchun istalgan muharrirdan foydalanishingiz mumkin. Lekin eng qulay variant onlayn xizmat bo'ladi. PIXLR, chunki bu yerda yuklab olish uchun hech narsa yo'q va uni to'g'ridan-to'g'ri brauzeringizda ishlatishingiz mumkin.
Boshlash uchun paydo bo'lgan muharrir oynasida "Rasmni kompyuterdan yuklash" maydonini tanlang. Misol tariqasida raketa tasvirini olaylik.
Agar tanlangan belgining oʻlchamlari juda katta boʻlsa, siz kichik oʻlchamni sozlashingiz kerak boʻladi. Buning uchun yuqori menyuga o'ting va "Tahrirlash" maydonini tanlang va "Bepul o'zgartirish …"
Keyin, rasmning yonida maxsus markerlar paydo boʻladi, ular harakatlanadi, siz tasvir hajmini oʻzgartirishingiz mumkin. Proportionlarni saqlash uchun siz Shift tugmasidan foydalanishingiz mumkin, uni ushlab turganda ko'k markerlarni siljitishingiz kerak. Ushbu qadamlar oxirida raketa tasviri olinadi.
Keyingi qadam qatlam nusxasini yaratishdir.
Endi siz raketaning rasmini yangi qatlamdan biroz yuqoriga siljitishingiz kerak. Buning uchun chap menyuning ikkinchi ustunida joylashgan siljitish vositasi va klaviaturadagi yuqoriga o'qni ishlatish qulay bo'ladi.
Endi yuqoridagi rasmni oq-qora qilishimiz kerak. Buni yuqori menyudagi "Tuzatish" - "Hue / Saturation" bandi yordamida amalga oshirish mumkin. To'liq desaturatsiya uchun Saturation slayderini -100 ga o'rnatish kerak. Ushbu amal sizga kursorni ustiga olib borganingizda “Yuqoriga” tugmasi qora va oqdan rangga aylanadigan effekt yaratish imkonini beradi.
Yakuniy teginish - ikkita rasm atrofidagi qo'shimcha joyni olib tashlash. Buning uchun chap menyudan "Kesish" bandini tanlang vabiz to'rtburchakda faqat ikkita raketani tanlaymiz. Kesishni amalga oshirish uchun Enter tugmasi bosiladi.
Natijada qoʻshimcha boʻsh joy qolmagan rasm paydo boʻladi. Olingan rasmning kengligi va balandligini yozishingiz kerak, chunki bu maʼlumotlar keyingi bosqichda foydali boʻladi.
Saqlash uchun siz "Fayl" - "Saqlash" tugmasini bosishingiz kerak, bu erda "Mening kompyuterim" chap xatboshida biz rasm nomini yozamiz (faqat inglizcha tartib), formatni tanlang (bu erda case, PNG) va "Ha" tugmasini bosing.
"Yuqoriga" tugmasi skripti bilan fayl
Bunday holatda skript yozishingiz shart emas. Tayyor kodga ba'zi o'zgartirishlar kiritib, ommaviy versiyadan foydalanish mumkin bo'ladi.
Buni amalga oshirish uchun istalgan kod muharririni yuklab olishingiz kerak. Eng mashhur va bepul variant bu Notepad++. Uni o'rnatganingizdan so'ng, ushbu kodning barchasini nusxalashingiz va unga joylashtirishingiz kerak:
| $(hujjat).ready(funksiya(){ $(oyna).scroll(funksiya () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(funksiya () {$('tana, html').animate({scrollTop: 0}, 400); false qaytaring;}); }); |
Keyin, yuqori menyuda "Fayl" - "Saqlash …" tugmasini bosing, shundan so'ng biz kodni.js formatida saqlaymiz. Shundan so'ng, FTP ulanishi orqali skript fayllari va rasmlarni yuklash orqali saytingizda ushbu koddan foydalanishingiz mumkin.
Saytda oʻrnatish
Sayt uchun yuqoriga aylantirish tugmasini oʻrnatish uchun uni joylashtirishingiz kerakkerakli joy kodi. Uni tegdan oldin kiritishingiz kerak.
CSS yordamida tugma uslubi yaratish
Ko'pincha saytning "yuqoriga" tugmasi pastki qismida joylashgan ("kolontitr").
Quyidagi kod saytning style.css fayliga qoʻshilishi kerak:
|
/Yuqoriga tugma/ .scrollTop{ background:url('images/up.png') 0 0 takrorlanmaydi;/mahalliy tasvir yoʻli/ width:39px;/ tugmasi width/ height:96px;/50% tugma balandligi/ bottom:5px;/sobit holatda pastki toʻldirish/ left:89%;/chapga siljitish/ }.scrollTop:hover{ background-position:0 -108px; } /fon ofset/" |
Bu holda tasvir kengligi va balandligi haqidagi ma'lumotlar kerak bo'ladi. Qabul qilingan ma'lumotlarni kodga kiritishgina qoladi va sayt uchun "yuqoriga" tugmasi tayyor bo'ladi! Yana nima?
Wordpress sayti uchun yuqoriga tugmasi
Ushbu CMS uchun "Yuqoriga" tugmasi plaginlar yordamida ham, mustaqil ravishda ham amalga oshirilishi mumkin.
Plaginlar usuli eng qulay va oʻrnatish oson, chunki u faqat oʻrnatish tugmasini bosishni va plagin menyusidagi barcha funksiyalarni sozlashni talab qiladi.
Oxirgisini tanlashga ehtiyotkorlik bilan yondashish kerak, chunki u bilan saytga virusni yuqtirish oson bo'ladi. Eng mashhur va tasdiqlangan variant - Scroll Back To Top deb nomlangan plagin. Uni Wordpress plaginlari uchun standart qidiruv yordamida yuklab olishingiz mumkin.
Ushbu kengaytma mavjudbir nechta funksionallik va Wordpress sayti uchun "yuqoriga" tugmasini sozlash juda oson bo'ladi. Barcha qiymatlarni o'zgartirish shart emas, faqat sayt sahifasida tugmaning ko'rinishi va joylashuvini sozlashingiz kerak.
Koʻrib turganingizdek, plaginlar yordamida sozlash tugmachasini sozlash juda oson. Ammo bitta muhim nuance bor, ya'ni har bir o'rnatilgan plagin CMSni yuklaydi. Bu Internet-resursning tezligiga ta'sir qilishi mumkin. Shuning uchun ko'pchilik sayt egalari barcha o'zgarishlarni uchinchi tomon kengaytmalari yordamida emas, balki to'g'ridan-to'g'ri kodga kiritishga harakat qilishadi. Siz HTML sayti uchun "yuqoriga" tugmasini qo'yishingiz mumkin, bu esa sarflangan resurslarni kamaytiradi.
Barcha Wordpress tizim fayllarini oʻzgartirishdan oldin ularning zaxira nusxasini yaratishingiz kerak. Keyin yuqorida tavsiflangan oʻz tugmachangizni yaratish uchun barcha amallarni bajaring.
Joomla uchun "yuqoriga" tugmasi
CMS Joomla Wordpress kabi plaginlarni oʻrnatishni ham qoʻllab-quvvatlaydi. Joomla 3’dagi sayt uchun “yuqoriga” tugmasining eng muvaffaqiyatli versiyasi bu sahifaning tepasi deb nomlangan kengaytmadir.
Ushbu CMSda istalgan plaginni "Kengaytma menejeri" orqali o'rnatish mumkin. Buning uchun sizga kerak:
- plaginni internetda yuklab oling;
- kengaytma menejeridagi "Koʻrish" tugmasini bosing;
- yuklangan arxivni tanlang;
- “Yuklab olish” tugmasini bosing va oʻrnating.
Endi uni "Plugin menejeri"da faollashtirishingiz kerak. Buning uchunsiz ushbu bo'limga o'tishingiz, plaginni topishingiz va uning holatini "yoqilgan" ga o'tkazishingiz kerak.
Keyingi qadam barcha kengaytma parametrlarini oʻng tomondan ushbu plaginning “Asosiy parametrlari”ni topishingiz kerak boʻlgan bir xil boʻlim yordamida sozlashdir.
Sahifaning yuqori qismida quyidagi funksiya mavjud:
- Ishga tushirish/administrator - bu variantni nafaqat Internet-resursda, balki Joomla CMS panelining o'zida ham yoqadi.
- Tugmani ochish pozitsiyasi - yuqoriga tugma paydo boʻlishi uchun foydalanuvchi necha pikselni orqaga qaytarishi kerak.
- Omit tugmasi matni - tugmada matn mavjudligi.
- Har doim tepada - sayt sahifasi har doim yuqoridan ko'rsatiladi. Sahifaning maʼlum bir joyiga oʻtish uchun langarlardan foydalanilganda, bu opsiyani yoqish shart emas.
- Smooth Scroll - sahifani silliq aylantirish imkonini beradi.
- Oʻtkazish davomiyligi - sahifa toʻliq boshiga oʻtadigan vaqt.
- Scroll Transition - Oʻtkazishga koʻproq vizual effektlar qoʻshadi.
- Transition Easing - sahifaning yuqori qismiga harakatni "zaiflashtirdi".
- Link Joylashuvi - belgining joylashuvi. Odatiy bo'lib, tugma pastki o'ng burchakda joylashgan.
- Uslublardan foydalanish – quyidagi maydonda oʻrnatilishi mumkin boʻlgan individual tugma uslubi. Agar manfiy qiymatga almashtirilsa, barcha uslub sozlamalari saytning faol mavzusidan olinadi.
- Link Style - tugmacha uslubingiz parametrlarini kiritish uchun maydon.
"Yuqoriga" tugmasi uslubini sozlash uchun sizda kamida minimal bo'lishi kerakCCS bilimi. Aks holda, oxirgidan oldingi parametr qiymatini "Yo'q" ga o'zgartirishingiz kerak.
Yana bir muhim nuance shundaki, belgidagi odatiy yozuv inglizcha matnni o'z ichiga oladi: Yuqoriga qaytish. Bunday matn rus tilidagi saytda bo'lishi mumkin emas, shuning uchun uni plagin parametrlarida o'chirib qo'ying yoki rus tiliga o'zgartiring.
Ushbu yozuvni oʻzgartirish uchun siz FTP yoki hostingga oʻrnatilgan fayl menejeri yordamida sayt serveriga oʻtishingiz kerak. Keyin “/administrator/language/en-GB/” katalogida “en-GB.plg_system_topofthepage.ini” nomli faylni topishingiz kerak.
Matnni oʻzgartirishdan oldin ushbu hujjatning kodlanishini UTF-8 ga oʻzgartirishingiz kerak. Bu rus harflarini normal ko'rsatishga imkon beradi.
Keyingi qatorni topamiz:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Yuqoriga qaytish"" |
va tirnoq ichidagi iborani ruschaga o'zgartiring. Siz "Yuqoriga!", "Tepaga!" kabi iboralarni ishlatishingiz mumkin. yoki “Yuqoriga!”.
Oxirida siz oʻzgartirilgan faylni saqlashingiz va Joomla’da sayt uchun “yuqoriga” tugmasini tekshirishingiz kerak boʻladi.
Ucoz uchun yuqoriga tugmasi
Ucoz-dagi sayt uchun "yuqoriga" tugmasi kod kiritish yordamida bajarilishi kerak, chunki bu CMS uchun plaginlarni ulash mumkin emas. Biroq, bu tizim fayllarini uzoq vaqt o'rganishni va kerakli qatorlarni qidirishni talab qilmaydi, shunchaki kichik kodni kerakli joyga joylashtirishingiz kerak.
Bizni oʻrnatish uchunzarur:
- "Boshqarish paneliga -> Dizayn -> Dizayn boshqaruvi (shablonlar) -> Saytning pastki qismiga o'ting;
- skriptni kiriting (loyihaning rasmiy veb-saytida va uchinchi tomon resurslarida topish mumkin).
Xulosa
Shundan so'ng, pastki o'ng burchakda foydalanuvchini sahifaning eng yuqori qismiga ko'chiradigan belgi paydo bo'ladi.
Koʻrib turganingizdek, istalgan CMS uchun orqaga tugmani oʻrnatish unchalik qiyin emas edi. Siz ham avtomatlashtirilgan o'rnatish usulini (plaginlarni) va qo'lda ishlatishingiz mumkin. Biroq, oxirgi variant eng mos bo'lib qolmoqda, chunki u saytning ishlashiga salbiy ta'sir ko'rsatmaydi.
Sayt resurslari sarfini minimallashtirish uchun HTML sayti uchun "yuqoriga qaytish" tugmasidan foydalanishingiz mumkin, chunki kengaytmalarning koʻpligi resurs ishlashiga salbiy taʼsir koʻrsatishi mumkin. Bitta "yuqoriga" tugma plagini sayt sahifalarini yuklash vaqtiga katta ta'sir ko'rsata olmaydi, lekin ko'p hollarda foydalanuvchi CMS-da kamida o'nlab plaginlarga ega. Bunday holda, har qanday plagin sayt sahifalarining ishlashiga salbiy ta'sir ko'rsatishi mumkin.
