Ang ganitong function bilang ang "up" na buton para sa site ay ginagawang mas maginhawa ang mapagkukunan ng Internet para sa mga bisita nito. Tinutulungan ka nitong madaling lumipat mula saanman sa pahina patungo sa tuktok ng pahina. Ito ay kinakailangan para sa mga online na tindahan at site na may malalaking artikulo na nangangailangan ng mahabang pag-scroll pababa.
Para saan ito
Sa ngayon, karamihan sa mga site ay walang function bilang "up" na button, at walang kritikal dito. Ngunit ang paggamit nito ay maaaring magdulot ng maraming pakinabang kapwa para sa mapagkukunan ng Internet at para sa mga bisita nito.
Benefit para sa mga bisita
Madalas itong nangyayari kapag ang pahina ng isang mapagkukunan sa Internet ay puno ng impormasyon, kapag ang isang artikulong nagbibigay-kaalaman ay kumukuha ng maraming espasyo at kailangan mong mag-scroll pababa sa pahina gamit ang gulong ng mouse. Bilang karagdagan dito, sa dulo ng artikulo ay maaaring maraming komento tungkol dito.
Kapag ang isang bisita ay nagbasa ng isang artikulo, walang nakakapagod sa pag-scroll pababa sa pahina, ngunit kapag ang teksto ay natapos na at kailangan mong umakyat, nagsisimula itong medyo nakakapagod. Karamihan sa mga tao ay magiging tamad na mag-scroll nang mahabang panahon, at isasara na lang nila ang site, sa halip na maglakad-lakad pa sa kalawakan nito.
Gamit ang buttonupang agad na lumipat sa tuktok ng pahina ay ginagawang mas maginhawang magpalipas ng oras sa site.
Benefit para sa Internet resource
Ang mga positibo para sa mapagkukunan mismo ay nagmumula sa mga nakaraang salik, dahil ang mas madaling pag-navigate sa site ay nagpapabuti sa mga salik sa pag-uugali dahil ang lahat ng mga bisita ay magiging mas aktibo sa kanilang mga aksyon at lilipat sa iba pang mga pahina.
Kaya, ang mga salik na ito sa pag-uugali ay nakakaapekto sa saloobin ng lahat ng mga search engine sa site at humahantong sa pagpapabuti sa posisyon sa mga resulta ng paghahanap.
Paano gawin ang "up" na button sa site nang mag-isa
Nakikitungo pa. Maaari kang gumawa ng scroll up na button anumang oras para sa isang site sa alinman sa CMS sa pamamagitan ng pagsunod lamang ng ilang napakasimpleng hakbang:
- paggawa ng larawan;
- paggawa ng script;
- lumikha ng istilo ng button;
- pagdaragdag sa site.
Larawan ng button
Upang magdagdag ng "up" na button sa site, kailangan mo munang gawin ang icon mismo, kapag na-click, lilipat ang user sa tuktok ng page. Para magawa ito, maaari kang gumamit ng mga handa na opsyon, kung saan maaari mong piliin ang pinakaangkop palagi.
Upang mapabuti ang hitsura ng button, kailangan naming gumawa ng ilang mga pagpapabuti, ibig sabihin, upang gumawa ng sprite na nagpapahintulot sa amin na pagsamahin ang mga background na larawan batay sa CSS, at sa gayon ay lumikha ng animation mula sa mga ito.
Para sa mga graphic na gawa, maaari mong gamitin ang anumang editor. Ngunit ang pinaka-maginhawang opsyon ay isang online na serbisyo. PIXLR, dahil walang mada-download dito at magagamit mo ito nang direkta sa iyong browser.
Para makapagsimula, sa lalabas na editor window, piliin ang field na "Mag-upload ng larawan mula sa computer." Kunin natin ang larawan ng isang rocket bilang isang halimbawa.
Kung masyadong malaki ang mga sukat ng napiling icon, kakailanganin mong gumawa ng maliit na pagsasaayos ng laki. Upang gawin ito, pumunta sa tuktok na menu at piliin ang field na "I-edit," at pagkatapos ng "Libreng pagbabago …"
Susunod, lalabas ang mga espesyal na marker sa tabi ng larawan, na gumagalaw na maaari mong baguhin ang laki ng larawan. Upang mapanatili ang mga proporsyon, maaari mong gamitin ang Shift key, na hawak na kailangan mong ilipat ang mga asul na marker. Sa dulo ng mga hakbang na ito, may makukuhang larawan ng isang rocket.
Ang susunod na hakbang ay gumawa ng kopya ng layer.
Ngayon ay kailangan mong ilipat nang kaunti ang larawan ng rocket mula sa bagong layer. Upang gawin ito, magiging maginhawang gamitin ang tool sa paglipat, na matatagpuan sa pangalawang column ng kaliwang menu, at ang pataas na arrow sa keyboard.
Ngayon kailangan nating gawing black and white ang tuktok na larawan. Magagawa ito gamit ang item na "Pagwawasto" - "Hue / Saturation" sa tuktok na menu. Para sa kumpletong desaturation, ang Saturation slider ay dapat itakda sa -100. Ang pagkilos na ito ay magbibigay-daan sa iyong lumikha ng epekto kung saan ang "Up" na button ay magiging kulay mula sa itim at puti kapag nag-hover ka dito.
Ang huling pagpindot ay ang pag-alis ng dagdag na espasyo sa paligid ng dalawang larawan. Upang gawin ito, piliin ang item na "I-crop" mula sa kaliwang menu atpumili lamang kami ng dalawang rockets sa isang parihaba. Upang magsagawa ng pag-crop, pinindot ang Enter key.
Ang resulta ay isang larawan kung saan walang dagdag na libreng espasyo. Kakailanganin mong isulat ang lapad at taas ng magreresultang larawan, dahil ang data na ito ay magiging kapaki-pakinabang sa susunod na hakbang.
Upang i-save, kailangan mong mag-click sa "File" - "Save", kung saan sa kaliwang talata "My Computer" isinulat namin ang pangalan ng imahe (tanging English layout), piliin ang format (sa ito case, PNG) at i-click ang "Yes" button.
File na may script ng "up" button
Hindi mo kailangang magsulat ng script sa kasong ito. Posibleng gamitin ang pampublikong bersyon, na gumagawa ng ilang pagbabago sa natapos na code.
Para magawa ito, kailangan mong mag-download ng anumang code editor. Ang pinakasikat at libre ding opsyon ay Notepad++. Pagkatapos itong i-install, kailangan mong kopyahin at i-paste ang lahat ng code na ito dito:
| $(dokumento).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;}); }); |
Susunod, i-click sa tuktok na menu na "File" - "I-save bilang …", pagkatapos ay i-save namin ang code sa.js na format. Pagkatapos nito, magagamit mo ang code na ito sa iyong site sa pamamagitan ng pag-upload ng mga script file at mga larawan dito gamit ang isang FTP na koneksyon.
I-install sa site
Upang itakda ang scroll up button para sa site, kailangan mong ilagaykinakailangang place code. Kailangan mong ilagay ito bago ang tag na.
Paggawa ng Estilo ng Button na may CSS
Kadalasan, ang "pataas" na button para sa site ay nasa ibaba ("footer").
Dapat idagdag ang sumusunod na code sa style.css file ng site:
|
/Up Button/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/native image path/ width:39px;/ button width/ height:96px;/50% button height/ bottom:5px;/bottom padding sa fixed position/ left:89%;/shift left/ }.scrollTop:hover{ background-position:0 -108px; } /background offset/" |
Sa kasong ito, kakailanganin ang data ng lapad at taas ng larawan na iyon. Ito ay nananatiling lamang upang ipasok ang natanggap na data sa code, at ang "up" na pindutan para sa site ay magiging handa! Ano pa?
Up button para sa Wordpress site
Para sa CMS na ito, maaaring gawin ang "Up" na button gamit ang mga plugin, gayundin nang nakapag-iisa.
Ang paraan ng mga plugin ay ang pinaka-maginhawa at madaling i-install, dahil kailangan lang nitong i-click ang button na i-install at i-configure ang lahat ng functionality sa menu ng plugin.
Ang pagpili sa huli ay dapat lapitan nang may pag-iingat, dahil sa pamamagitan nito ay madaling makakuha ng virus sa site. Ang pinakasikat at napatunayang opsyon ay isang plugin na tinatawag na Scroll Back To Top. Maaari mo itong i-download gamit ang karaniwang paghahanap para sa mga plugin ng Wordpress.
Ang extension na ito ay maymaramihang pag-andar, at magiging napakadaling i-customize ang "up" na buton para sa isang Wordpress site. Hindi kinakailangang baguhin ang lahat ng mga halaga, kailangan mo lamang i-configure ang hitsura at lokasyon ng button sa pahina ng site.
Tulad ng nakikita mo, napakadali ng pag-set up ng button sa pag-up gamit ang mga plugin. Ngunit mayroong isang mahalagang nuance, na ang bawat naka-install na plugin ay naglo-load ng CMS. Maaaring makaapekto ito sa bilis ng mapagkukunan ng Internet. Iyon ang dahilan kung bakit sinusubukan ng karamihan sa mga may-ari ng site na gawin ang lahat ng mga pagbabago nang direkta sa code, at hindi sa tulong ng mga extension ng third-party. Maaari kang gumawa ng "up" na button para sa isang HTML site, na magpapaliit sa mga mapagkukunang natupok.
Bago baguhin ang lahat ng Wordpress system file, kailangan mong i-back up ang mga ito. Pagkatapos ay maaari mong sundin ang lahat ng mga hakbang upang lumikha ng iyong sariling button, na inilarawan sa itaas.
Button "up" para sa Joomla
CMS Sinusuportahan din ng Joomla ang pag-install ng mga plugin, tulad ng Wordpress. Ang pinakamatagumpay na bersyon ng "up" na button para sa isang site sa Joomla 3 ay isang extension na tinatawag na Top of the Page.
Sa CMS na ito, maaaring i-install ang anumang plugin sa pamamagitan ng "Extension Manager". Para dito kailangan mo:
- i-download ang plugin sa Internet;
- mag-click sa button na "Browse" sa extension manager;
- piliin ang na-download na archive;
- i-click ang "I-download" at i-install.
Ngayon ay kailangan mo itong i-activate sa "Plugin Manager". Para ditokailangan mong pumunta sa seksyong ito, hanapin ang plugin at ilipat ang katayuan nito sa "enabled".
Ang susunod na hakbang ay i-configure ang lahat ng parameter ng extension gamit ang parehong seksyon kung saan kailangan mong hanapin ang "Mga pangunahing parameter" ng plugin na ito sa kanang bahagi.
Itaas ng Pahina ay may sumusunod na functionality:
- Run in/ administrator - pinapagana ang opsyon hindi lamang sa Internet resource, kundi pati na rin sa Joomla CMS panel mismo.
- Button Reveal Position - kung gaano karaming mga pixel ang dapat i-rewind ng user para lumabas ang up button.
- Omit Button Text - ang presensya ng text sa button.
- Palaging nasa Itaas - ang pahina ng site ay palaging ipapakita mula sa itaas nito. Kapag gumagamit ng mga anchor upang mag-scroll sa isang partikular na lokasyon sa page, hindi kailangang i-enable ang opsyong ito.
- Smooth Scroll - ginagawang mas maayos ang pag-scroll ng page.
- Tagal ng Pag-scroll - ang oras kung kailan ganap na lilipat ang page sa simula.
- Scroll Transition - Nagdaragdag ng higit pang visual effect sa pag-scroll.
- Transition Easing - "pinapahina" ang paggalaw sa itaas ng page.
- Lokasyon ng Link - ang lokasyon ng icon. Bilang default, matatagpuan ang button sa kanang sulok sa ibaba.
- Use Styles – indibidwal na istilo ng button, na maaaring itakda sa field sa ibaba. Kung ililipat sa negatibong halaga, kukunin ang lahat ng setting ng istilo mula sa aktibong tema ng site.
- Estilo ng Link - isang field para sa paglalagay ng mga parameter ng istilo ng iyong button.
Upang i-customize ang istilo ng "up" na button, dapat ay mayroon kang hindi bababa sa minimalKaalaman sa CCS. Kung hindi, dapat mong ilipat ang value ng penultimate parameter sa "Hindi".
Ang isa pang mahalagang nuance ay ang karaniwang inskripsyon sa icon ay naglalaman ng English na text: Return to Top. Ang nasabing text ay hindi maaaring makita sa isang Russian-language na site, kaya dapat mo lang itong i-disable sa mga parameter ng plugin o baguhin ito sa Russian.
Upang baguhin ang inskripsyon na ito, kailangan mong pumunta sa server ng site gamit ang FTP o ang file manager na nakapaloob sa hosting. Susunod, sa direktoryo na "/administrator/language/en-GB/" kailangan mong maghanap ng file na tinatawag na "en-GB.plg_system_topofthepage.ini".
Bago baguhin ang text, dapat mong baguhin ang pag-encode ng dokumentong ito sa UTF-8. Gagawin nito ang normal na pagpapakita ng mga letrang Ruso.
Susunod ay makikita natin ang sumusunod na linya:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Bumalik sa Itaas"" |
at baguhin ang parirala sa mga panipi sa Russian. Maaari kang gumamit ng mga parirala gaya ng "Up!", "To the top!" o “Taas!”.
Sa dulo, kakailanganin mong i-save ang binagong file at tingnan ang "up" na button para sa site sa Joomla.
Up button para sa Ucoz
Ang "up" na button para sa site sa Ucoz ay kailangang gawin gamit ang code injection, dahil imposibleng magkonekta ng mga plugin para sa CMS na ito. Gayunpaman, hindi ito nangangailangan ng mahabang pag-aaral ng mga system file at paghahanap ng mga kinakailangang linya, kailangan mo lang mag-paste ng maliit na code sa tamang lugar.
Upang i-install kamikinakailangan:
- pumunta sa "Control Panel -> Design -> Design Management (templates) -> Ibaba ng site;
- ilagay ang script (matatagpuan sa opisyal na website ng proyekto at mga mapagkukunan ng third-party).
Konklusyon
Pagkatapos nito, may lalabas na icon sa kanang sulok sa ibaba, na inililipat ang user sa pinakatuktok ng page.
Tulad ng nakikita mo, hindi masyadong mahirap ang pagse-set up ng back button para sa alinman sa CMS. Maaari mong gamitin ang parehong isang awtomatikong paraan ng pag-install (mga plugin) at isang manu-mano. Gayunpaman, ang huling opsyon ay nananatiling pinakaangkop, dahil hindi ito nakakaapekto sa pagganap ng site.
Maaari mong gamitin ang button na "back to top" para sa isang HTML na site upang mabawasan ang pagkonsumo ng mga mapagkukunan ng site, dahil ang malaking bilang ng mga extension ay maaaring magkaroon ng negatibong epekto sa pagganap ng mapagkukunan. Ang isang "up" na button na plugin ay hindi makakaapekto nang malaki sa oras ng paglo-load ng mga pahina ng site, ngunit sa karamihan ng mga kaso ang user ay may hindi bababa sa isang dosenang plugin na naka-install sa CMS. Sa kasong ito, maaaring makaapekto ang anumang plugin sa pagganap ng mga page ng site.
