Fungsi seperti butang "naik" untuk tapak menjadikan sumber Internet lebih mudah untuk pelawatnya. Ia membantu anda bergerak dengan mudah dari mana-mana sahaja pada halaman ke bahagian atas halaman. Ini adalah satu kemestian untuk kedai dalam talian dan tapak dengan artikel besar yang memerlukan tatal panjang ke bawah.
Untuk apa
Pada masa ini, kebanyakan tapak tidak mempunyai fungsi seperti butang "naik", dan tiada perkara kritikal dalam hal ini. Tetapi penggunaannya boleh membawa banyak kelebihan untuk sumber Internet dan untuk pelawatnya.
Manfaat untuk pelawat
Ia selalunya berlaku apabila halaman sumber Internet sarat dengan maklumat, apabila artikel bermaklumat memakan banyak ruang dan anda perlu menatal ke bawah halaman dengan roda tetikus. Di samping itu, pada akhir artikel mungkin terdapat banyak ulasan mengenainya.
Apabila pelawat membaca artikel, tiada apa yang memenatkan untuk menatal ke bawah halaman, tetapi apabila teks telah tamat dan anda perlu naik ke atas, ia mula menjadi sedikit memenatkan. Kebanyakan orang hanya akan menjadi terlalu malas untuk menatal untuk masa yang lama, dan mereka hanya akan menutup tapak itu, bukannya berjalan-jalan lagi di sekitar hamparannya.
Menggunakan butanguntuk terus bergerak ke bahagian atas halaman menjadikannya lebih mudah untuk meluangkan masa di tapak.
Manfaat untuk sumber Internet
Positif untuk sumber itu sendiri datang daripada faktor masa lalu, kerana navigasi tapak yang lebih mudah meningkatkan faktor tingkah laku kerana semua pelawat akan lebih aktif dalam tindakan mereka dan berpindah ke halaman lain.
Oleh itu, faktor tingkah laku ini mempengaruhi sikap semua enjin carian terhadap tapak dan membawa kepada peningkatan dalam kedudukan dalam hasil carian.
Cara membuat butang "up" di tapak sendiri
Berurusan lebih lanjut. Anda sentiasa boleh membuat butang tatal ke atas untuk tapak pada mana-mana CMS sendiri dengan mengikuti beberapa langkah yang sangat mudah:
- ciptaan imej;
- membuat skrip;
- buat gaya butang;
- menambahkan pada tapak.
Imej butang
Untuk menambah butang "naik" pada tapak, mula-mula anda perlu membuat ikon itu sendiri, apabila diklik, pengguna akan beralih ke bahagian atas halaman. Untuk melakukan ini, anda boleh menggunakan pilihan sedia, antaranya anda boleh memilih yang paling sesuai pada bila-bila masa.
Untuk menambah baik penampilan butang, kami perlu membuat beberapa penambahbaikan, iaitu, membuat sprite yang membolehkan kami menggabungkan imej latar belakang berdasarkan CSS, dengan itu mencipta animasi daripadanya.
Untuk kerja grafik, anda boleh menggunakan mana-mana editor. Tetapi pilihan yang paling mudah ialah perkhidmatan dalam talian. PIXLR, kerana tiada apa-apa untuk dimuat turun di sini dan anda boleh menggunakannya terus dalam penyemak imbas anda.
Untuk bermula, dalam tetingkap editor yang muncul, pilih medan "Muat naik imej dari komputer". Mari kita ambil imej roket sebagai contoh.
Jika dimensi ikon yang dipilih terlalu besar, maka anda perlu membuat pelarasan saiz kecil. Untuk melakukan ini, pergi ke menu atas dan pilih medan "Edit", dan selepas "Transformasi percuma …"
Seterusnya, penanda khas muncul di sebelah gambar, bergerak yang boleh anda ubah saiz imej. Untuk mengekalkan perkadaran, anda boleh menggunakan kekunci Shift, menahan yang anda perlukan untuk menggerakkan penanda biru. Pada penghujung langkah ini, imej roket diperoleh.
Langkah seterusnya ialah membuat salinan lapisan.
Kini anda perlu mengalihkan gambar roket dari lapisan baharu ke atas sedikit. Untuk melakukan ini, mudah untuk menggunakan alat gerak, yang terletak di lajur kedua menu kiri dan anak panah ke atas pada papan kekunci.
Kini kita perlu menjadikan gambar teratas menjadi hitam putih. Ini boleh dilakukan menggunakan item "Pembetulan" - "Hue / Saturation" dalam menu atas. Untuk nyahsaturasi lengkap, gelangsar Ketepuan hendaklah ditetapkan kepada -100. Tindakan ini akan membolehkan anda mencipta kesan yang mana butang "Naik" akan bertukar daripada hitam dan putih kepada warna apabila anda menuding di atasnya.
Sentuhan terakhir ialah mengalih keluar ruang tambahan di sekeliling dua gambar. Untuk melakukan ini, pilih item "Pangkas" dari menu kiri dankami memilih hanya dua roket dalam segi empat tepat. Untuk melakukan pemangkasan, kekunci Enter ditekan.
Hasilnya ialah imej yang tiada ruang kosong tambahan. Anda perlu menulis lebar dan tinggi imej yang terhasil, kerana data ini akan berguna dalam langkah seterusnya.
Untuk menyimpan, anda perlu klik pada "Fail" - "Simpan", di mana di perenggan kiri "Komputer Saya" kami menulis nama imej (hanya susun atur bahasa Inggeris), pilih format (dalam ini kes, PNG) dan klik butang "Ya".
Fail dengan skrip butang "atas"
Anda tidak perlu menulis skrip dalam kes ini. Anda boleh menggunakan versi awam, membuat beberapa pindaan pada kod siap.
Untuk melakukan ini, anda perlu memuat turun sebarang editor kod. Pilihan yang paling popular dan juga percuma ialah Notepad++. Selepas memasangnya, anda perlu menyalin dan menampal semua kod ini ke dalamnya:
| $(dokumen).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}});$('scroller').klik(function () {$('body, html').animate({scrollTop: 0}, 400); return false;}); }); |
Seterusnya, klik dalam menu atas "Fail" - "Simpan sebagai …", selepas itu kami menyimpan kod dalam format.js. Selepas itu, anda boleh menggunakan kod ini di tapak anda dengan memuat naik fail skrip dan imej padanya menggunakan sambungan FTP.
Pasang di tapak
Untuk menetapkan butang tatal ke atas untuk tapak, anda perlu meletakkannyakod tempat yang diperlukan. Anda perlu memasukkannya sebelum teg.
Membuat Gaya Butang dengan CSS
Lazimnya, butang "atas" untuk tapak terletak di bahagian bawah ("kaki").
Kod berikut mesti ditambahkan pada fail style.css tapak:
|
/Butang Atas/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/laluan imej asli/ width:39px;/ butang lebar/ tinggi:96px;/50% ketinggian butang/ bawah:5px;/lapik bawah pada kedudukan tetap/ kiri:89%;/anjak ke kiri/ }.scrollTop:hover{ background-position:0 -108px; } /background offset/" |
Dalam kes ini, data lebar dan ketinggian imej tersebut akan diperlukan. Ia kekal hanya untuk memasukkan data yang diterima ke dalam kod, dan butang "naik" untuk tapak akan siap! Apa lagi?
Butang atas untuk tapak Wordpress
Untuk CMS ini, butang "Naik" boleh dibuat menggunakan pemalam, dan juga secara bebas.
Kaedah pemalam adalah yang paling mudah dan mudah dipasang, kerana ia hanya memerlukan anda mengklik pada butang pasang dan mengkonfigurasi semua fungsi dalam menu pemalam.
Pilihan yang terakhir harus didekati dengan berhati-hati, kerana dengan itu akan mudah untuk memperoleh virus di tapak. Pilihan yang paling popular dan terbukti ialah pemalam yang dipanggil Tatal Kembali Ke Atas. Anda boleh memuat turunnya menggunakan carian standard untuk pemalam Wordpress.
Sambungan ini mempunyaipelbagai fungsi, dan ia akan menjadi sangat mudah untuk menyesuaikan butang "naik" untuk tapak Wordpress. Anda tidak perlu menukar semua nilai sama sekali, anda hanya perlu mengkonfigurasi penampilan dan lokasi butang pada halaman tapak.
Seperti yang anda lihat, menyediakan butang naik dengan pemalam adalah sangat mudah. Tetapi terdapat satu nuansa penting, iaitu setiap pemalam yang dipasang memuatkan CMS. Ini boleh menjejaskan kelajuan sumber Internet. Itulah sebabnya kebanyakan pemilik tapak cuba membuat semua perubahan terus dalam kod, dan bukan dengan bantuan sambungan pihak ketiga. Anda boleh membuat butang "up" untuk tapak HTML, yang akan meminimumkan sumber yang digunakan.
Sebelum menukar semua fail sistem Wordpress, anda perlu menyandarkannya. Kemudian anda boleh mengikuti semua langkah untuk membuat butang anda sendiri, yang diterangkan di atas.
Butang "atas" untuk Joomla
CMS Joomla juga menyokong pemasangan pemalam, seperti Wordpress. Versi butang "naik" yang paling berjaya untuk tapak di Joomla 3 ialah sambungan yang dipanggil Bahagian Atas Halaman.
Dalam CMS ini, sebarang pemalam boleh dipasang melalui "Pengurus Sambungan". Untuk ini anda perlukan:
- muat turun pemalam di Internet;
- klik pada butang "Semak imbas" dalam pengurus sambungan;
- pilih arkib yang dimuat turun;
- klik "Muat turun" dan pasang.
Kini anda perlu mengaktifkannya dalam "Pengurus Plugin". Untuk inianda perlu pergi ke bahagian ini, cari pemalam dan tukar statusnya kepada "didayakan".
Langkah seterusnya ialah mengkonfigurasi semua parameter sambungan menggunakan bahagian yang sama di mana anda perlu mencari "Parameter asas" pemalam ini di sebelah kanan.
Atas Halaman mempunyai fungsi berikut:
- Jalankan masuk/ pentadbir - mendayakan pilihan bukan sahaja pada sumber Internet, tetapi juga dalam panel CMS Joomla itu sendiri.
- Kedudukan Dedahkan Butang - bilangan piksel yang pengguna mesti gulung semula agar butang atas muncul.
- Tinggalkan Teks Butang - kehadiran teks pada butang.
- Sentiasa di Atas - halaman tapak akan sentiasa dipaparkan dari atasnya. Apabila menggunakan sauh untuk menatal ke lokasi tertentu pada halaman, pilihan ini tidak perlu didayakan.
- Tatal Lancar - menjadikan penatalan halaman lebih lancar.
- Tempoh Tatal - masa selepas halaman akan bergerak sepenuhnya ke permulaan.
- Peralihan Tatal - Menambah lebih banyak kesan visual pada penatalan.
- Pelonggaran Peralihan - "melemahkan" pergerakan ke bahagian atas halaman.
- Lokasi Pautan - lokasi ikon. Secara lalai, butang terletak di penjuru kanan sebelah bawah.
- Gunakan Gaya – gaya butang individu, yang boleh ditetapkan dalam medan di bawah. Jika ditukar kepada nilai negatif, maka semua tetapan gaya akan diambil daripada tema aktif tapak.
- Gaya Pautan - medan untuk memasukkan parameter gaya butang anda.
Untuk menyesuaikan gaya butang "atas", anda mesti mempunyai sekurang-kurangnya minimumpengetahuan CCS. Jika tidak, anda harus menukar nilai parameter kedua terakhir kepada "Tidak".
Satu lagi nuansa penting ialah tulisan biasa pada ikon mengandungi teks bahasa Inggeris: Return to Top. Teks sedemikian tidak boleh terdapat pada tapak berbahasa Rusia, jadi anda hanya perlu melumpuhkannya dalam parameter pemalam atau menukarnya kepada bahasa Rusia.
Untuk menukar inskripsi ini, anda perlu pergi ke pelayan tapak menggunakan FTP atau pengurus fail terbina dalam pengehosan. Seterusnya, dalam direktori "/administrator/language/en-GB/" anda perlu mencari fail yang dipanggil "en-GB.plg_system_topofthepage.ini".
Sebelum menukar teks, anda harus menukar pengekodan dokumen ini kepada UTF-8. Ini akan menjadikan paparan biasa huruf Rusia.
Seterusnya kita dapati baris berikut:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Kembali ke Atas"" |
dan tukar frasa dalam tanda petikan kepada bahasa Rusia. Anda boleh menggunakan frasa seperti "Naik!", "Ke atas!" atau “Naik!”.
Pada akhirnya, anda perlu menyimpan fail yang diubah suai dan menyemak butang "naik" untuk tapak di Joomla.
Butang atas untuk Ucoz
Butang "naik" untuk tapak di Ucoz perlu dilakukan menggunakan suntikan kod, kerana adalah mustahil untuk menyambungkan pemalam untuk CMS ini. Walau bagaimanapun, ini tidak memerlukan kajian panjang terhadap fail sistem dan mencari baris yang diperlukan, anda hanya perlu menampal kod kecil di tempat yang betul.
Untuk memasang kamidiperlukan:
- pergi ke "Panel Kawalan -> Reka Bentuk -> Pengurusan Reka Bentuk (templat) -> Bahagian bawah tapak;
- masukkan skrip (boleh didapati di tapak web rasmi projek dan sumber pihak ketiga).
Kesimpulan
Selepas itu, ikon akan muncul di penjuru kanan sebelah bawah, mengalihkan pengguna ke bahagian paling atas halaman.
Seperti yang anda lihat, menyediakan butang belakang untuk mana-mana CMS bukanlah sesuatu yang sukar. Anda boleh menggunakan kedua-dua kaedah pemasangan automatik (plugin) dan manual. Walau bagaimanapun, pilihan terakhir tetap yang paling sesuai, kerana ia tidak menjejaskan prestasi tapak.
Anda boleh menggunakan butang "kembali ke atas" untuk tapak HTML untuk meminimumkan penggunaan sumber tapak, kerana sejumlah besar sambungan boleh memberi kesan negatif ke atas prestasi sumber. Satu pemalam butang "naik" tidak akan dapat mempengaruhi masa pemuatan halaman tapak, tetapi dalam kebanyakan kes pengguna mempunyai sekurang-kurangnya sedozen pemalam yang dipasang pada CMS. Dalam kes ini, sebarang pemalam boleh menjejaskan prestasi halaman tapak.
