Сайтын "дээш" товчлуур гэх мэт функц нь интернетийн эх сурвалжийг зочдод илүү тохиромжтой болгодог. Энэ нь хуудасны аль ч газраас хуудасны дээд хэсэгт хялбархан шилжихэд тусална. Энэ нь удаан гүйлгэх шаардлагатай том нийтлэл бүхий онлайн дэлгүүр болон сайтуудад зайлшгүй шаардлагатай.
Юунд зориулагдсан юм
Одоогоор ихэнх сайтуудад "дээш" товчлуур гэх мэт функц байхгүй бөгөөд үүнд чухал зүйл байхгүй. Гэхдээ үүнийг ашиглах нь интернетийн эх сурвалж болон зочдод олон давуу талыг авчирдаг.
Зочлогчдод зориулсан ашиг тус
Интернэт эх сурвалжийн хуудас мэдээлэл ихтэй байх, мэдээллийн нийтлэл их зай эзэлдэг, хулганын дугуйгаар хуудсыг доош гүйлгэх шаардлагатай үед ихэвчлэн тохиолддог. Үүнээс гадна нийтлэлийн төгсгөлд үүнтэй холбоотой олон сэтгэгдэл бичигдсэн байж магадгүй.
Зочин нийтлэл уншихад хуудсыг доош гүйлгэх нь ядаргаатай зүйл байхгүй ч текст дуусч, дээшээ шилжихэд бага зэрэг ядаргаатай болж эхэлдэг. Ихэнх хүмүүс удаан хугацаанд гүйлгэхээс залхуу байх бөгөөд сайтын талбайг тойрохын оронд зүгээр л хаах болно.
Товч ашигланХуудасны дээд хэсэгт нэн даруй шилжих нь сайтад цаг зарцуулахад илүү тохиромжтой.
Интернет эх сурвалжийн ашиг тус
Сайтыг хялбархан чиглүүлэх нь зан үйлийн хүчин зүйлсийг сайжруулдаг тул бүх зочдод үйлдлүүддээ илүү идэвхтэй байж, бусад хуудас руу шилжих болно.
Тиймээс эдгээр зан үйлийн хүчин зүйлүүд нь бүх хайлтын системийн сайтад хандах хандлагад нөлөөлж, хайлтын илэрц дэх байр суурийг сайжруулахад хүргэдэг.
Сайт дээрх "дээшлэх" товчийг өөрөө хэрхэн хийх вэ
Цаашид харьцаж байна. Та хэдхэн маш энгийн алхмуудыг хийснээр аль ч CMS дээрх сайтыг дээш гүйлгэх товчийг өөрөө хийж болно:
- зураг бүтээх;
- скрипт үүсгэх;
- товчлуурын загвар үүсгэх;
- сайтад нэмж байна.
Товчлуурын зураг
Сайт дээр "дээш" товчлуур нэмэхийн тулд эхлээд дүрсийг өөрөө хийх хэрэгтэй бөгөөд дарахад хэрэглэгч хуудасны дээд хэсэгт шилжих болно. Үүнийг хийхийн тулд та бэлэн сонголтуудыг ашиглаж болох бөгөөд эдгээрээс хамгийн тохиромжтойг нь сонгох боломжтой.
Товчны харагдах байдлыг сайжруулахын тулд бид зарим нэг сайжруулалт хийх хэрэгтэй, тухайлбал, CSS дээр суурилсан дэвсгэр зургийг нэгтгэж, тэдгээрээс хөдөлгөөнт дүрс үүсгэх боломжтой спрайт хийх хэрэгтэй.
График ажилд та ямар ч засварлагч ашиглаж болно. Гэхдээ хамгийн тохиромжтой сонголт бол онлайн үйлчилгээ байх болно. PIXLR, энд татаж авах зүйл байхгүй тул та үүнийг шууд хөтөч дээрээ ашиглах боломжтой.
Эхлүүлэхийн тулд гарч ирэх засварлагч цонхноос "Компьютерээс зураг байршуулах" талбарыг сонгоно уу. Пуужингийн зургийг жишээ болгон авч үзье.
Хэрэв сонгосон дүрсний хэмжээ хэт том бол та жижиг хэмжээтэй тохируулга хийх шаардлагатай болно. Үүнийг хийхийн тулд дээд цэс рүү очоод "Засах" талбарыг сонгоод "Үнэгүй хувиргах …" гэсний дараа
Дараа нь зургийн хажууд тусгай тэмдэглэгээ гарч ирэх бөгөөд та зургийн хэмжээг өөрчлөх боломжтой. Пропорцийг хадгалахын тулд та Shift товчийг ашиглан цэнхэр тэмдэглэгээг зөөх хэрэгтэй. Эдгээр алхмуудын төгсгөлд пуужингийн дүрсийг авна.
Дараагийн алхам бол давхаргын хуулбарыг үүсгэх явдал юм.
Одоо та шинэ давхаргаас пуужингийн зургийг бага зэрэг дээш зөөх хэрэгтэй. Үүнийг хийхийн тулд зүүн цэсний хоёр дахь баганад байрлах зөөвөрлөх хэрэгсэл болон гар дээрх дээш сумыг ашиглахад тохиромжтой.
Одоо дээд талын зургийг хар цагаан болгох хэрэгтэй. Үүнийг дээд цэсний "Залруулах" - "Өнгө / Ханалт" гэсэн зүйлийг ашиглан хийж болно. Бүрэн ханалтгүй болгохын тулд Saturation гулсагчийг -100 болгож тохируулах хэрэгтэй. Энэ үйлдэл нь таныг "Дээш" товчлуур дээр гүйлгэх үед хар цагаанаас өнгөт хувирах эффект үүсгэх боломжийг олгоно.
Эцсийн мэдрэгч нь хоёр зургийн эргэн тойрон дахь нэмэлт зайг арилгах явдал юм. Үүнийг хийхийн тулд зүүн цэснээс "Таслах" зүйлийг сонгоодБид тэгш өнцөгт дотор зөвхөн хоёр пуужин сонгоно. Тайрахын тулд Enter товчийг дарна.
Үр дүн нь нэмэлт сул зайгүй зураг юм. Эдгээр өгөгдөл нь дараагийн алхамд хэрэг болох тул та үүссэн зургийн өргөн ба өндрийг бичих хэрэгтэй болно.
Хадгалахын тулд та "Файл" - "Хадгалах" дээр дарж, "Миний компьютер" зүүн догол мөрөнд зургийн нэрийг бичнэ (зөвхөн англи хэл дээр), форматыг сонгоно уу (үүнд case, PNG) болон "Тийм" товчийг товшино уу.
"Дээш" товчлуурын скрипттэй файл
Энэ тохиолдолд та скрипт бичих шаардлагагүй. Дууссан кодонд зарим нэмэлт өөрчлөлт оруулснаар нийтийн хувилбарыг ашиглах боломжтой болно.
Үүнийг хийхийн тулд та дурын код засварлагчийг татаж авах хэрэгтэй. Хамгийн алдартай, бас үнэгүй сонголт бол Notepad++ юм. Үүнийг суулгасны дараа та энэ бүх кодыг хуулж оруулах хэрэгтэй:
| $(баримт бичиг).бэлэн(функц(){ $(цонх).scroll(функц () {хэрэв ($(энэ).scrollTop() > 0) {$('scroller').fadeIn ();} өөр {$('scroller').fadeOut();}}); $('scroller'). дарна уу(функц () {$('body, html').animate({scrollTop: 0}, 400); худал буцаана;}); }); |
Дараа нь дээд цэсний "Файл" - "Хадгалах …" гэснийг товшоод бид кодыг.js форматаар хадгална. Үүний дараа та энэ кодыг FTP холболт ашиглан скрипт файл болон зургийг байршуулж сайт дээрээ ашиглах боломжтой.
Сайт дээр суулгах
Сайтын дээш гүйлгэх товчийг тохируулахын тулд та оруулах хэрэгтэйшаардлагатай газрын код. Та үүнийг шошгоны өмнө оруулах шаардлагатай.
CSS ашиглан товчлуурын загвар үүсгэх
Ихэнхдээ сайтын "дээш" товчлуур доод талд ("хөл хэсэг") байрладаг.
Сайтын style.css файлд дараах кодыг нэмэх шаардлагатай:
|
/Дээш товчлуур/ .scrollTop{ background:url('images/up.png') 0 0 давтагдахгүй;/төрөлх зургийн зам/ width:39px;/ товчлуур өргөн/ height:96px;/50% товчлуурын өндөр/ доод:5px;/тогтмол байрлал дахь доод дэвсгэр/ зүүн:89%;/зүүн тийш шилжүүлэх/ }.scrollTop: хулганаар хуулах{ background-position:0 -108px; } /арын офсет/" |
Энэ тохиолдолд зургийн өргөн болон өндрийн өгөгдөл шаардлагатай болно. Хүлээн авсан өгөгдлийг код руу оруулахад л үлдэх бөгөөд сайтын "дээш" товчлуур бэлэн болно! Өөр юу?
Wordpress сайтын Дээш товчлуур
Энэ CMS-ийн хувьд "Дээш" товчлуурыг залгаасууд болон бие даан хийх боломжтой.
Суулгах товчин дээр дарж залгаасын цэсний бүх функцийг тохируулах шаардлагатай тул залгаасуудын арга нь хамгийн тохиромжтой бөгөөд суулгахад хялбар юм.
Сүүлийнхийг сонгохдоо болгоомжтой хандах хэрэгтэй, учир нь энэ нь сайт дээр вирус олж авахад хялбар байх болно. Хамгийн алдартай бөгөөд батлагдсан сонголт бол Scroll Back To Top нэртэй залгаас юм. Та үүнийг Wordpress залгаасуудын стандарт хайлтыг ашиглан татаж авах боломжтой.
Энэ өргөтгөлтэйолон функцтэй бөгөөд Wordpress сайтын "дээш" товчлуурыг өөрчлөхөд маш хялбар байх болно. Бүх утгыг өөрчлөх шаардлагагүй, та зөвхөн сайтын хуудсан дээрх товчлуурын харагдах байдал, байршлыг тохируулах хэрэгтэй.
Таны харж байгаагаар залгаасуудын тусламжтайгаар тохируулах товчлуурыг тохируулах нь маш хялбар юм. Гэхдээ нэг чухал нюанс байдаг бөгөөд энэ нь суулгасан залгаас бүр CMS-ийг ачаалдаг. Энэ нь интернетийн нөөцийн хурдад нөлөөлж болзошгүй. Тийм ч учраас ихэнх сайтын эзэд бүх өөрчлөлтийг гуравдагч этгээдийн өргөтгөлийн тусламжтайгаар биш харин шууд кодонд хийхийг оролддог. Та HTML сайтад зориулж "дээшлэх" товчлуур хийж болох бөгөөд ингэснээр зарцуулсан нөөцийг багасгах болно.
Wordpress системийн бүх файлыг өөрчлөхийн өмнө та тэдгээрийг нөөцлөх хэрэгтэй. Дараа нь та дээр дурдсан бүх алхмуудыг дагаж өөрийн товчлуурыг үүсгэж болно.
Joomla-д зориулсан "дээш" товчлуур
CMS Joomla нь Wordpress гэх мэт нэмэлт өргөтгөлүүдийг суулгахыг дэмждэг. Joomla 3 дээрх сайтын "дээшээ" товчлуурын хамгийн амжилттай хувилбар бол хуудасны дээд гэж нэрлэгддэг өргөтгөл юм.
Энэ CMS-д ямар ч залгаасыг "Өргөтгөлийн менежер"-ээр суулгаж болно. Үүний тулд танд хэрэгтэй:
- залгаасыг интернетээс татаж авах;
- өргөтгөлийн менежер дэх "Үзэх" товчийг дарна уу;
- татаж авсан архивыг сонгох;
- "Татаж авах" дээр товшоод суулгана уу.
Одоо та үүнийг "Plugin Manager" дотроос идэвхжүүлэх хэрэгтэй. Үүний төлөөта энэ хэсэгт очиж залгаасыг олоод статусыг нь "идэвхжүүлсэн" болгож солих хэрэгтэй.
Дараагийн алхам бол баруун талд байгаа энэ залгаасын "Үндсэн параметрүүд"-ийг олох шаардлагатай ижил хэсгийг ашиглан өргөтгөлийн бүх параметрүүдийг тохируулах явдал юм.
Хуудасны дээд хэсэгт дараах функцууд байна:
- Администратор руу орох - энэ сонголтыг зөвхөн интернетийн эх сурвалжаас гадна Joomla CMS самбар дээр идэвхжүүлнэ.
- Товчны илчлэх байрлал - дээш товчлуур гарч ирэхийн тулд хэрэглэгч хэдэн пиксел ухраах ёстой.
- Орхих товчлуурын текст - товчлуур дээрх текст байгаа эсэх.
- Үргэлж дээд талд - сайтын хуудас үргэлж дээрээс нь харагдах болно. Хуудасны тодорхой байршил руу гүйлгэхийн тулд зангуу ашиглах үед энэ сонголтыг идэвхжүүлэх шаардлагагүй.
- Smooth Scroll - хуудсыг илүү зөөлөн гүйлгэх.
- Гүйлгэх үргэлжлэх хугацаа - хуудас бүрэн эхэнд шилжих хугацаа.
- Scroll Transition - Гүйлгэхдээ илүү олон визуал эффект нэмнэ.
- Шилжилтийг хөнгөвчлөх - хуудасны дээд хэсэгт шилжих хөдөлгөөнийг "сулруулж".
- Холбоосын байршил - дүрсний байршил. Өгөгдмөлөөр, товчлуур баруун доод буланд байрладаг.
- Загвар ашиглах – доорх талбарт тохируулж болох бие даасан товчлуурын загвар. Хэрэв сөрөг утга руу шилжсэн бол бүх загварын тохиргоог сайтын идэвхтэй загвараас авна.
- Холбоосын хэв маяг - товчлуурын загварын параметрүүдийг оруулах талбар.
"Дээш" товчлуурын хэв маягийг өөрчлөхийн тулд та хамгийн багадаа байх ёстойCCS мэдлэг. Үгүй бол та эцсийн өмнөх параметрийн утгыг "Үгүй" болгож өөрчлөх хэрэгтэй.
Өөр нэг чухал нюанс бол дүрс дээрх ердийн бичээс нь англи хэл дээрх текстийг агуулж байгаа явдал юм: Дээшээ буцах. Орос хэл дээрх сайт дээр ийм текст байх боломжгүй тул та залгаасын параметрүүдээс үүнийг идэвхгүй болгох эсвэл орос хэл рүү өөрчлөх хэрэгтэй.
Энэ бичээсийг өөрчлөхийн тулд та FTP эсвэл хостинг дотор суулгасан файлын менежер ашиглан сайтын сервер рүү очих хэрэгтэй. Дараа нь "/administrator/language/en-GB/" лавлахаас "en-GB.plg_system_topofthepage.ini" нэртэй файлыг олох хэрэгтэй.
Текстийг өөрчлөхийн өмнө та энэ баримт бичгийн кодчиллыг UTF-8 болгож өөрчлөх хэрэгтэй. Энэ нь орос үсгийг хэвийн харуулах болно.
Дараа нь бид дараах мөрийг олно:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Дээд рүү буцах"" |
ба хашилт доторх хэллэгийг орос хэл рүү өөрчил. Та "Дээшээ!", "Дээшээ!" гэх мэт хэллэгийг ашиглаж болно. эсвэл "Дээшээ!".
Төгсгөлд нь та өөрчилсөн файлаа хадгалж, Joomla дээрх сайтын "дээш" товчлуурыг шалгах хэрэгтэй болно.
Ucoz-д зориулсан дээш товчлуур
Укоз дээрх сайтын "дээш" товчлуурыг энэ CMS-д зориулсан залгаасуудыг холбох боломжгүй тул код оруулах замаар хийх шаардлагатай. Гэсэн хэдий ч, энэ нь системийн файлуудыг удаан судалж, шаардлагатай мөрүүдийг хайх шаардлагагүй бөгөөд та зүгээр л жижиг кодыг зөв газартаа буулгахад хангалттай.
Биднийг суулгахын тулдшаардлагатай:
- "Хяналтын самбар -> Дизайн -> Дизайн менежмент (загварууд) -> Сайтын доод хэсэгт очно уу;
- скриптийг оруулна уу (төслийн албан ёсны вэбсайт болон гуравдагч талын эх сурвалжаас олж болно).
Дүгнэлт
Үүний дараа баруун доод буланд хэрэглэгчийг хуудасны хамгийн дээд хэсэгт зөөх дүрс гарч ирнэ.
Таны харж байгаагаар аливаа CMS-ийн буцах товчлуурыг тохируулах нь тийм ч хэцүү байгаагүй. Та автоматжуулсан суулгалтын арга (залаас) болон гарын авлагын аль алиныг нь ашиглаж болно. Гэсэн хэдий ч, сүүлийн сонголт нь сайтын гүйцэтгэлд сөргөөр нөлөөлөхгүй тул хамгийн тохиромжтой хэвээр байна.
Олон тооны өргөтгөлүүд нь нөөцийн гүйцэтгэлд сөргөөр нөлөөлж болзошгүй тул та HTML сайтын "дээд рүү буцах" товчийг ашиглан сайтын нөөцийн хэрэглээг багасгах боломжтой. Нэг "дээш" товчлуурын залгаас нь сайтын хуудсуудыг ачаалах хугацаанд ихээхэн нөлөөлөх боломжгүй боловч ихэнх тохиолдолд хэрэглэгч CMS дээр дор хаяж хэдэн арван залгаас суулгасан байдаг. Энэ тохиолдолд аливаа залгаас нь сайтын хуудасны гүйцэтгэлд сөргөөр нөлөөлж болзошгүй.
