Tombol halus "Kembali ke Atas" di jQuery. Transisi animasi ke bagian atas halaman Cara berpindah ke bagian atas halaman
Fungsi seperti tombol “atas” untuk sebuah situs membuat sumber daya Internet lebih nyaman bagi pengunjungnya. Ini membantu Anda berpindah dengan mudah dari mana saja di halaman ke bagian atas halaman. Ini adalah suatu keharusan bagi toko online dan situs dengan artikel besar yang memerlukan scroll ke bawah yang lama.
Mengapa hal ini perlu?Saat ini, sebagian besar situs tidak memiliki fungsi seperti tombol "atas", dan tidak ada yang penting mengenai hal itu. Namun penggunaannya dapat membawa banyak keuntungan baik bagi sumber daya Internet maupun bagi pengunjungnya.
Manfaat bagi pengunjungHal ini sering terjadi ketika halaman sumber daya Internet penuh dengan informasi, ketika artikel informasi memakan banyak ruang dan Anda harus menggulir halaman ke bawah menggunakan roda mouse. Selain itu, di akhir artikel mungkin banyak komentar mengenai hal tersebut.
Saat pengunjung membaca sebuah artikel, tidak ada yang membosankan untuk menggulir halaman ke bawah, tetapi ketika teks sampai di akhir dan Anda harus naik, itu mulai sedikit melelahkan. Kebanyakan orang akan terlalu malas untuk menggulir dalam waktu lama, dan mereka akan menutup situs tersebut alih-alih berkeliaran di sekitar hamparannya.
Menggunakan tombol untuk langsung berpindah ke bagian atas halaman membuat waktu Anda di situs lebih nyaman.
Manfaat untuk sumber daya InternetAspek positif untuk sumber daya itu sendiri berasal dari faktor masa lalu, karena navigasi yang disederhanakan di sekitar situs meningkatkan faktor perilaku, karena semua pengunjung akan lebih aktif dalam tindakan mereka dan berpindah ke halaman lain.
Dengan demikian, data mempengaruhi sikap semua mesin pencari terhadap situs tersebut dan mengarah pada peningkatan tempatnya dalam hasil pencarian.
Cara membuat tombol "naik" di website sendiri
- membuat gambar;
- membuat skrip;
- membuat gaya tombol;
- menambahkan ke situs.
Untuk menambahkan tombol “kembali ke atas” di situs, Anda harus terlebih dahulu membuat ikon itu sendiri, yang bila diklik, akan memindahkan pengguna ke bagian atas halaman. Untuk melakukan ini, Anda dapat menggunakan opsi yang sudah jadi, di antaranya Anda selalu dapat memilih yang paling sesuai.
Untuk menyempurnakan tampilan tombol perlu dilakukan beberapa perbaikan yaitu membuat sprite yang memungkinkan Anda menggabungkan gambar background berdasarkan CSS sehingga dapat dibuat animasi darinya.
Untuk pekerjaan grafis, Anda dapat menggunakan editor apa pun. Namun opsi yang paling nyaman adalah layanan online PIXLR, karena Anda tidak perlu mengunduh apa pun di sini dan Anda dapat menggunakannya langsung di browser Anda.
Untuk memulai, di jendela editor yang muncul, Anda perlu memilih bidang “Unggah gambar dari komputer”. Mari kita ambil gambar sebuah roket sebagai contoh.
Jika dimensi ikon yang dipilih terlalu besar, Anda perlu melakukan sedikit penyesuaian ukuran. Untuk melakukan ini, Anda perlu pergi ke menu atas dan memilih bidang "Edit", dan setelah "Transformasi bebas..."
Selanjutnya, penanda khusus muncul di sebelah gambar; dengan memindahkannya, Anda dapat mengubah ukuran gambar. Untuk menjaga proporsi, Anda dapat menggunakan tombol Shift, sambil menahannya, Anda perlu memindahkan penanda biru. Di akhir tindakan ini, gambar roket diperoleh.
Langkah selanjutnya adalah membuat salinan layer.
Sekarang Anda perlu memindahkan sedikit gambar roket dari layer baru ke atas. Untuk melakukan ini, akan lebih mudah menggunakan alat pindah, yang terletak di kolom kedua menu kiri, dan panah atas pada keyboard.
Sekarang Anda perlu membuat gambar atas menjadi hitam putih. Hal ini dapat dilakukan dengan menggunakan item “Koreksi” - “Hue/Saturation” di menu atas. Untuk desaturasi lengkap, penggeser Saturasi harus disetel ke -100. Tindakan ini akan memungkinkan Anda membuat efek di mana tombol "Atas" akan berubah dari hitam putih menjadi berwarna saat Anda mengarahkan kursor ke atasnya.
Sentuhan terakhir adalah menghilangkan ruang berlebih di sekitar kedua gambar. Untuk melakukan ini, pilih item “Pangkas” dari menu sebelah kiri dan pilih hanya dua roket dalam persegi panjang. Untuk melakukan cropping, tekan tombol Enter.
Hasilnya adalah gambar yang tidak ada ruang kosong tambahan. Anda perlu menuliskan lebar dan tinggi gambar yang dihasilkan, karena data ini akan berguna pada langkah berikutnya.
Untuk menyimpan, Anda perlu mengklik "File" - "Simpan", di mana di item kiri "Komputer Saya" kami menuliskan nama gambar (hanya tata letak bahasa Inggris), pilih format (dalam hal ini - PNG) dan klik tombol "Ya".
File skrip tombol atasTidak perlu menulis skrip dalam hal ini. Dimungkinkan untuk menggunakan opsi yang tersedia untuk umum dengan membuat beberapa perubahan pada kode yang sudah jadi.
Untuk melakukan ini, Anda perlu mengunduh editor kode apa pun. Opsi paling populer dan juga gratis adalah Notepad++. Setelah menginstalnya, Anda perlu menyalin dan menempelkan semua kode ini ke dalamnya:
| $(dokumen).siap(fungsi())( $(jendela).scroll(fungsi () (jika ($(ini).scrollTop() > 0) ($("#scroller").fadeIn();) else ($("#scroller").fadeOut();))); $("#scroller").click(function () ($("body,html").animate((scrollTop: 0), 400 ) ; mengembalikan salah ;)); |
Untuk memasang tombol gulir ke atas untuk suatu situs, Anda perlu menempatkan kode di tempat yang diperlukan. Anda harus memasukkannya sebelum tag .
Menata Tombol di CSSPaling sering, tombol "atas" untuk sebuah situs terletak di bagian bawah ("footer").
Anda harus menambahkan kode berikut ke file style.css situs:
Dalam hal ini, Anda memerlukan data untuk lebar dan tinggi gambar. Yang tersisa hanyalah memasukkan data yang diterima ke dalam kode, dan tombol "atas" untuk situs tersebut akan siap! Apa lagi?
Tombol atas untuk situs Wordpress
Untuk CMS ini, tombol “Atas” dapat dibuat menggunakan plugin, maupun secara mandiri.
Metode plugin adalah yang paling nyaman dan termudah untuk dipasang, karena yang perlu Anda lakukan hanyalah mengeklik tombol instal dan mengonfigurasi semua fungsi di menu plugin.
Pilihan yang terakhir harus didekati dengan hati-hati, karena bersamaan dengan itu Anda dapat dengan mudah membeli virus untuk situs tersebut. Opsi paling populer dan terbukti adalah plugin bernama Scroll Back To Top. Anda dapat mendownloadnya menggunakan pencarian plugin Wordpress standar.
Ekstensi ini memiliki banyak fungsi, dan akan sangat mudah untuk menyesuaikan tombol "kembali ke atas" untuk situs Wordpress. Tidak perlu mengubah semua nilai; Anda hanya perlu mengonfigurasi tampilan dan lokasi tombol di halaman situs.
Seperti yang Anda lihat, memasang tombol “atas” menggunakan plugin sangat sederhana. Namun ada satu nuansa penting, yaitu setiap plugin yang diinstal memuat CMS. Hal ini dapat mempengaruhi kecepatan sumber daya Internet. Itulah sebabnya sebagian besar pemilik situs web mencoba membuat semua perubahan langsung pada kodenya, dan tidak menggunakan ekstensi pihak ketiga. Anda dapat membuat tombol "naik" untuk situs web dalam HTML, yang akan meminimalkan sumber daya yang dikonsumsi.
Sebelum mengubah semua file sistem Wordpress, Anda harus membuat cadangannya. Selanjutnya, Anda dapat mengikuti semua langkah untuk membuat tombol Anda sendiri yang dijelaskan di atas.
Tombol atas untuk Joomla
CMS Joomla juga mendukung instalasi plugin, sama seperti Wordpress. Versi tombol "atas" yang paling sukses untuk sebuah situs di Joomla 3 adalah ekstensi yang disebut Top of the Page.
Di CMS ini, plugin apa pun dapat diinstal melalui “Extension Manager”. Untuk melakukan ini, Anda memerlukan:
- unduh plugin di Internet;
- klik tombol “Jelajahi” di manajer ekstensi;
- pilih arsip yang diunduh;
- Klik "Unduh" dan instal.
Sekarang Anda perlu mengaktifkannya di Plugin Manager. Untuk melakukan ini, Anda perlu pergi ke bagian ini, temukan plugin dan ubah statusnya menjadi "diaktifkan".
Bagian Atas Halaman memiliki fungsi berikut:
- Jalankan di/ administrator - mengaktifkan opsi tidak hanya pada sumber daya Internet, tetapi juga di panel CMS Joomla itu sendiri.
- Posisi Pengungkapan Tombol - berapa piksel yang harus dimundurkan pengguna agar tombol "atas" muncul.
- Hilangkan Teks Tombol - adanya teks pada tombol.
- Always at Top – halaman situs akan selalu ditampilkan dari awal. Saat menggunakan jangkar untuk menggulir ke lokasi tertentu pada halaman, opsi ini tidak perlu diaktifkan.
- Gulir Halus - membuat pengguliran halaman lebih lancar.
- Durasi Gulir - waktu setelah halaman akan berpindah sepenuhnya ke awal.
- Transisi Gulir - menambahkan efek visual yang luar biasa pada pengguliran.
- Pelonggaran Transisi - “meringankan” pergerakan ke bagian atas halaman.
- Lokasi Tautan - lokasi ikon. Secara standar, tombolnya terletak di pojok kanan bawah.
- Gunakan Gaya - gaya tombol individual, yang dapat diatur pada kolom di bawah. Jika dialihkan ke nilai negatif, maka semua parameter gaya akan diambil dari tema situs aktif.
- Gaya Tautan - bidang untuk memasukkan parameter gaya tombol Anda.
Untuk menyesuaikan sendiri gaya tombol "atas", Anda setidaknya harus memiliki pengetahuan minimal tentang CCS. Jika tidak, Anda harus mengganti nilai parameter kedua dari belakang ke “Tidak”.
Nuansa penting lainnya adalah tulisan biasa pada ikon tersebut berisi teks bahasa Inggris: Kembali ke Atas. Teks seperti itu tidak dapat ada di situs berbahasa Rusia, jadi Anda cukup menonaktifkannya di parameter plugin atau mengubahnya ke bahasa Rusia.
Untuk mengubah tulisan ini, Anda perlu masuk ke server situs menggunakan FTP atau pengelola file yang ada di dalam hosting. Selanjutnya, di direktori “/administrator/bahasa/en-GB/” Anda perlu mencari file bernama “en-GB.plg_system_topofthepage.ini”.
Sebelum mengubah teks, Anda harus mengubah penyandian dokumen ini ke UTF-8. Ini akan memungkinkan tampilan huruf Rusia secara normal.
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Kembali ke Atas" " |
dan ubah frasa dalam tanda kutip ke bahasa Rusia. Anda dapat menggunakan frasa seperti “Naik!”, “Ke awal!” atau “Naik!”
Tombol atas untuk Ucoz
Tombol "atas" untuk situs di Ucoz harus dilakukan menggunakan injeksi kode, karena tidak mungkin menghubungkan plugin untuk CMS ini. Namun, ini tidak memerlukan studi panjang tentang file sistem dan mencari baris yang diperlukan; Anda hanya perlu memasukkan kode kecil di tempat yang diperlukan;
Untuk instalasi kita membutuhkan:
- buka “Panel Kontrol -> Desain -> Manajemen Desain (templat) -> Bagian bawah situs;
- masukkan skrip (dapat ditemukan di situs resmi proyek dan sumber pihak ketiga).
Setelah ini, sebuah ikon akan muncul di sudut kanan bawah, memindahkan pengguna ke bagian paling atas halaman.
Seperti yang Anda lihat, memasang tombol “Kembali ke Atas” untuk CMS mana pun tidaklah terlalu sulit. Anda dapat menggunakan metode instalasi otomatis (plugin) atau manual. Namun, opsi terakhir tetap menjadi yang paling cocok, karena tidak berdampak negatif pada kinerja situs.
Anda dapat menggunakan tombol "kembali ke atas" untuk situs HTML guna meminimalkan konsumsi sumber daya situs, karena sejumlah besar ekstensi dapat berdampak negatif pada kinerja sumber daya. Satu plugin tombol "atas" tidak akan terlalu mempengaruhi waktu pemuatan halaman situs, namun dalam kebanyakan kasus, pengguna memiliki setidaknya selusin plugin yang diinstal pada CMS. Dalam hal ini, plugin apa pun dapat berdampak buruk pada kinerja halaman situs.
Jika ada sejumlah besar konten di sebuah situs, webmaster menggunakan apa yang disebut tombol “gulir ke atas”. Tombol ini memungkinkan Anda untuk langsung menggulir konten ke bagian atas halaman, sehingga menyelamatkan pengguna dari pengguliran manual yang membosankan.
Anda dapat melihat pengoperasian tombol “scroll to top” di halaman blog ini.
Tombolnya sendiri menggunakan gambar dalam format png, oleh karena itu Anda harus menemukan sendiri versi gambar yang tepat terlebih dahulu. Layanan ikon berkualitas tinggi yang disebut iconfinder cocok untuk ini.
Kode HTML untuk keluaran tombolBlok div dengan pengidentifikasi panah ke atas disisipkan di antara tag ... dari file template yang dapat dieksekusi (biasanya file index.php). Di template studio Yootheme, ini adalah file theme.php, yang terletak di folder "layouts".
Penataan tombol CSS
Kode CSS penataan tombol yang dilampirkan ke kelas panah atas ditempatkan di file CSS mana pun yang disertakan dalam templat. Biasanya digunakan file style.css yang terletak di folder "css".
#panah ( posisi: tetap; kanan: 30px; /*posisi tombol: indentasi kanan*/ bawah: 30px; /*posisi tombol: indentasi bawah*/ latar belakang: url(/images/arrowup.png); /*jalur ke tombol gambar*/ lebar: 48 piksel; /*ukuran lebar tombol*/ tinggi: 48 piksel; /*ukuran tinggi tombol*/ kursor: penunjuk: /*tingkat transparansi statis*/ ) #arrowup :hover ( opacity: 1 ; /*tingkat opasitas saat melayang*/ )
Kode JS agar tombol berfungsiKode JavaScript yang mengimplementasikan fungsionalitas tombol ditempatkan di antara tag ... dari file template yang dapat dieksekusi (index.php) atau sebelum tag penutup.
$(dokumen).siap(fungsi() ( $(jendela).scroll(fungsi() ( jika ($(ini).scrollTop() > 0) ( $("#panah").fadeIn(300); / /kecepatan hilangnya tombol ) else ( $("#arrowup").fadeOut(200); //kecepatan munculnya tombol ) )); $("#arrowup").click(function() ( $("body,html" ).animate(( scrollTop: 0 ), 200); //kecepatan gulir kembali salah;
Cara menyembunyikan "tombol atas" di perangkat selulerBanyak webmaster menyembunyikan “tombol atas” saat menampilkan situs di perangkat seluler karena tidak diperlukan. Untuk menyembunyikan tombol "gulir ke atas" di perangkat seluler, gunakan kueri media css @media (semuanya ditulis dalam file css yang sama style.css):
@media hanya layar dan (lebar maksimal: 568 piksel) ( #arrowup (tampilan: tidak ada;) )
Tombol “Kembali ke Atas” atau “ ” adalah elemen yang populer dan berguna pada halaman situs web modern, terutama bila halaman tersebut berisi banyak konten.
Pertama-tama, hal ini umumnya meningkatkan kegunaan situs. Ketika pengguna telah membaca konten dalam jumlah besar dan menggulir ke bagian bawah halaman untuk kembali ke bagian atas situs, ia menggunakan pengguliran standar. Untuk memastikan bahwa pengguna diarahkan ke bagian atas halaman secara otomatis, pengembang dan administrator situs yang memikirkan pengunjungnya menggunakan berbagai variasi tombol “Kembali ke Atas”. Ini bisa menjadi solusi paling sederhana tanpa menggunakan perpustakaan atau skrip tambahan, serta dengan fungsionalitas yang diperluas, menghubungkan perpustakaan dan skrip eksekusi kecil.
Tombol “Kembali ke Atas” dirancang dengan cara yang berbeda; dapat berupa tautan teks biasa, tombol yang tampak klasik, tombol bulat dengan panah, atau dapat menggunakan jenis gambar yang sesuai. Paling sering, tombol-tombol ini terlihat statis; terkadang mereka lebih jarang mengubah warna latar belakang dan font saat diarahkan, pengembang menggunakan efek animasi.
Hari ini, dengan menggunakan contoh sederhana, kita akan melihat bagaimana Anda dapat menggunakan animasi CSS untuk menambahkan sedikit gerakan ke tombol pop-up "Kembali ke Atas" dan, pada saat yang sama, kita akan melihat skrip itu sendiri yang berisi peristiwa jQuery yang diperlukan agar tombol berfungsi.
Untuk mengaktifkan tombol di situs Anda, tidak perlu menambahkan tag apa pun ke markup HTML halaman. Cukup menghubungkan perpustakaan jQuery dan menulis js kecil yang dapat dieksekusi, dan tombolnya akan berfungsi. Kita akan membuat tampilan dan animasi menggunakan CSS dengan menghubungkan file style.css ke dokumen html.
Jadi, jika situs Anda belum memiliki perpustakaan jQuery yang terhubung, ini dapat dilakukan dengan mudah dengan menghubungkan versi saat ini langsung dari jaringan pengiriman konten Google (CDN). Untuk melakukannya, cukup tulis baris berikut sebelum tag penutup:
| < script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" > |
Di bawah, tepat di bawah baris ini, tempatkan js kecil yang dapat dieksekusi, yang akan menampilkan tombol kita dengan penundaan tertentu, dan juga menjalankan fungsi utamanya, dengan lancar mengembalikan pengguna ke bagian atas halaman.
| < script>jQuery(dokumen) . ready(function ($) ( var //kecepatan gulir ke atas kecepatan halaman = 500 , //tata letak tombol html $scrollTop = $(" " ) . appendTo("body" ) ; $scrollTop . click(function (e) ( e. preventDefault() ; $( "html:not(:animated),body:not(:animated)" ) . animate(( scrollTop: 0 ) , speed ) ; ) ) ; //mengatur fungsi mode tampilan tombol show_scrollTop() ( ( $(window.scrollTop() > 300 ) ? $scrollTop .fadeIn(600 ): $scrollTop .fadeOut(600 ) ; ) $(jendela) .scroll( fungsi () ( tampilkan_scrollTop() ; ) ); |
jQuery(document).ready(function($)( var //kecepatan gulir ke atas kecepatan halaman = 500, //tata letak tombol html $scrollTop = $(" ").appendTo("body"); $scrollTop.click(function(e)( e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate(( scrollTop: 0), kecepatan); )); //mengatur mode tampilan fungsi tombol show_scrollTop() ( ($(window).scrollTop() > 300) ? $scrollTop.fadeIn(600) : $scrollTop.fadeOut (600) ; ) $(jendela).scroll(fungsi() ( show_scrollTop(); ));
Saya menambahkan beberapa komentar pada naskah, boleh dikatakan, untuk pemahaman yang lebih baik. Seperti yang saya tulis di atas, metode ini menghilangkan kebutuhan untuk menambahkan tag apa pun ke markup halaman HTML; skrip melakukan ini dengan sempurna. Saat pengguna menggulir halaman ke bawah sebesar 300px, plugin akan menulis tag tombol, dalam kasus kami ini adalah:
| < a href= "#" title= "Cepat kembali ke atas" class = "scrollTop" >< i class = "fa fa-angle-double-up" > |
di badan halaman, semuanya di tempat yang sama sebelum tag penutup.
Untuk menampilkan dan menyembunyikan tombol dengan lancar, kami menggunakan fungsi .fadeIn() dan .fadeOut() dengan kecepatan tertentu 600 milidetik. Kecepatan menggulir ke bagian atas halaman diatur ke 500 milidetik.
| < link href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel= "stylesheet" type= "text/css" > |
Setelah menghubungkan Font Awesome, Anda dapat menggunakannya dalam kode HTML atau, seperti dalam kasus kami di js, menggunakan kelas khusus, fa dasar dan kelas untuk jenis ikon tertentu, dalam kasus kami adalah fa-angle-double-up . Anda dapat mengetahui kelas ikon tertentu di situs web.
Tampilan container icon, ukuran dan warna background, positioning, warna dan ukuran font, semua ini ditentukan langsung di css, dengan fokus pada selector.scrollTop i
| /* membentuk badan tombol, posisi dan efek transisi */ .scrollTop ( /* tersembunyi secara default */ tampilan : tidak ada ; /* sudut bulat */ -webkit-border-radius: 100% ; -moz-border-radius: 100% ; -ms-border-radius: 100% ; border-radius : 100% ; /* posisi tombol */ posisi : tetap ; 1rem ; bawah : 1rem ; /* tampilan kursor */ kursor : penunjuk ; /* efek transisi antara dua status tombol */ -webkit-transisi: bawah 0,2 detik kubik-bezier (0,42, 0, 0,58, 1) -moz-transition : bezier kubik 0,2 detik bawah (0,42 , 0 , 0,58 , 1 ) ; -ms-transisi: bezier kubik 0,2 detik bawah (0,42 , 0 , 0,58 , 1 ) ; ; transisi : bawah 0,2 detik kubik-bezier (0,42 , 0 , 0,58 , 1 ) ) /* geser tombol ke atas saat melayang */ .scrollTop : hover ( bawah : 2rem ) / * elemen desain tombol tambahan */ .scrollTop : sebelumnya , .scrollTop : setelah ( konten : "" ; atas: 0; kiri: 0; warna latar belakang : #766DCC ; lebar: 60 piksel; tinggi: 60 piksel; -radius-perbatasan-webkit: 100% ; -moz-batas-radius: 100% ; -ms-batas-radius: 100% ; radius batas : 100% ; -webkit-animation-fill-mode: keduanya; -moz-animation-fill-mode: keduanya; mode pengisian animasi: keduanya; posisi: mutlak; opacity: 0; ) /* tentukan nama, jenis dan kecepatan animasi llya:before */ .scrollTop : sebelum ( background-color : #736cad ; -webkit-animation: clickMe 1.8s 333ms unlimited ease-out; -moz-animation: clickMe 1.8s 333ms unlimited ease-out; animasi : clickMe 1.8s 333ms unlimited ease-out ) /* tentukan nama, jenis dan kecepatan animasi llya:after */ .scrollTop : after ( -webkit-animation: clickMe 1.8s 777ms kemudahan tak terbatas; - animasi moz: clickMe 1.8s 777ms kemudahan tak terbatas; animasi: clickMe 1.8s 777ms kemudahan tak terbatas ) /* membentuk tampilan ikon */ .scrollTop i ( lebar : 30px ; tinggi : 30px ; tampilan : blok ; latar belakang : rgba (28, 144, 243, 0,61); warna: #fff; tinggi garis: 30 piksel; -radius: 100%; posisi: kiri absolut: 15px; z-index : 100 ) /* animasi */ @-webkit-keyframes clickMe ( 0% ( opacity : 0 ; -webkit-transform: scale ( 0 ) ) 5% ( opacity : 1 ) 100% ( opacity : 0 ) ) @-moz-keyframes clickMe ( 0% ( opacity : 0 ; -moz-transform: scale ( 0 ) ) 5% ( opacity : 1 ) 100% ( opacity : 0 ) ) @keyframes clickMe ( 0% ( opacity : 0 ; -transformasi webkit: skala (0) ; -moz-transformasi: skala (0) ; -ms-transformasi: skala (0) ; opasitas: 1) 100% (opasitas: 0)) |
/* membentuk badan tombol, posisi dan efek transisi */ .scrollTop ( /* tersembunyi secara default */ tampilan: tidak ada; /* sudut bulat */ -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; /* perbaiki posisi tombol */ posisi: tetap; /* lebar: 60px; * tampilan kursor */ kursor: penunjuk; /* efek transisi antara dua status tombol */ -webkit-transition: bawah 0,2 detik kubik-bezier (0,42, 0, 0,58, 1); bezier(0.42, 0, 0.58, 1); -ms-transisi: bawah 0.2s kubik-bezier(0.42, 0, 0.58, 1); kubik-bezier(0.42, 0, 0.58, 1) /* menggeser tombol ke atas saat melayang */ .scrollTop:hover ( bawah: 2rem ) / * elemen desain tombol tambahan */ .scrollTop:before, .scrollTop:after ( konten : ""; atas: 0; kiri: 0; warna latar: #766DCC; lebar: 60 piksel; tinggi: 60 piksel; -radius-perbatasan-webkit: 100%; -moz-batas-radius: 100%; -ms-batas-radius: 100%; radius batas: 100%; -mode pengisian-animasi-webkit: keduanya; -moz-animation-fill-mode: keduanya; mode pengisian animasi: keduanya; posisi: mutlak; opacity: 0; ) /* tentukan nama, jenis dan kecepatan animasi llya:before */ .scrollTop:before ( warna latar: #736cad; -webkit-animation: clickMe 1.8s 333ms unlimited ease-out; -moz-animation: clickMe 1,8s 333ms unlimited ease-out; animasi: clickMe 1,8s 333ms unlimited ease-out ) /* tentukan nama, jenis dan kecepatan animasi llya:after */ .scrollTop:after ( -webkit-animation: clickMe 1.8s 777ms kemudahan tak terbatas; - animasi moz: clickMe 1.8s 777ms kemudahan tak terbatas; animasi: clickMe 1.8s 777ms kemudahan tak terbatas ) /* membentuk tampilan ikon */ .scrollTop i ( lebar: 30 piksel; tinggi: 30px; tampilan: blok; latar belakang: rgba (28, 144, 243, 0,61); warna: #fff; tinggi garis: 30 piksel; -radius: 100%; posisi: kiri absolut: 15 piksel; indeks-z: 100 ) /* animasi */ @-webkit-keyframes clickMe ( 0% ( opasitas: 0; -webkit-transform: skala(0) ) 5% ( opacity: 1 ) 100% ( opacity: 0 ) ) @-moz-keyframes clickMe ( 0% ( opacity : 0; -moz-transform: scale(0) ) 5% ( opacity: 1 ) 100% ( opacity: 0 ) ) @keyframes clickMe ( 0% ( opacity: 0; -webkit-transform: scale(0); -moz-transform : skala(0); -ms-transformasi: skala(0); -o-transformasi: skala(0); transformasi: skala(0) 5% ( opasitas: 1 ) 100% ( opasitas: 0 )
Masih mempertimbangkan animasi itu sendiri. Efek animasi tidak diterapkan ke seluruh tombol, tetapi ke elemen semu tambahan:setelah dan:sebelum . Untuk membuat animasi CSS, Anda perlu menambahkan properti animasi ke gaya elemen ini, yang memungkinkan Anda menentukan nama, menyesuaikan akselerasi dan durasi animasi, serta detail lain tentang bagaimana animasi harus mengalir. Tampilan animasi dikonfigurasikan menggunakan @keyframes, sekumpulan tombol yang mengonfigurasi frame animasi.
Dalam contoh kita, nama animasinya adalah: clickMe , durasi: 1.8s , penundaan: 333ms for:before dan 777ms untuk pseudo-element:after . Kami juga menentukan jumlah pengulangan animasi - tak terhingga tak terhingga dan jenis animasi ease-out - akselerasi di awal.
Setelah kita mengatur properti sementara animasi, tinggal menentukan tampilan animasi, ini dilakukan di dalam blok @keyframes. Pertama, nama animasinya diberikan, lalu langkah-langkahnya dijelaskan di dalam kurung kurawal. Dari contoh kode Anda dapat melihat bahwa bingkai properti opacity (transparansi) dan transformasi elemen transformasi dengan fungsi skala digunakan - skala elemen. Langkah-langkah animasi ditentukan menggunakan persentase.
Animasi properti CSS dijelaskan secara terpisah untuk browser webkit @-webkit-keyframes dan browser Mozilla Firefox @-moz-keyframes untuk mencegah tampilan animasi yang salah di browser web tersebut.
Itu saja. Sekali lagi, lihat contoh langsung cara kerja tombol “Kembali ke Atas” dan jika Anda memerlukannya, unduh sumber yang dikemas dalam arsip dan diposting di cloud di Y.Disk.
Dengan segala hormat, Andrew
Tombol “Kembali ke Atas” untuk sebuah situs mulai muncul di banyak website dan blog sejak tahun 2010. Apakah tombol ini berguna dan apakah pengguna menggunakannya? Mereka menggunakannya, tapi tidak banyak. Oleh karena itu, tombol ini biasanya ditambahkan di suatu tempat di tepi situs (paling sering di kanan bawah).
Ada tiga implementasi tombol atas. Tentu saja, masing-masing dari mereka dapat dibagi lagi menjadi beberapa kehalusan, namun ada tiga ide dasar. Kami akan melihat masing-masing dari mereka dan memberikan penilaian kami masing-masing.
Cara menerapkan tombol kembali ke atasSaya akan mulai dengan metode terbaik (kompleksitas implementasinya sedang).
1. Berdasarkan JavaScript dan AJAX (JQuery)Contoh yang dijelaskan di bawah ini diterapkan di situs ini.
Dalam metode ini kita akan mendapatkan tombol yang bagus dengan karakteristik sebagai berikut:
- menekan tombol akan memberikan transisi yang mulus ke bagian atas halaman;
- tombolnya akan transparan;
- dimungkinkan untuk mengatur ketinggian dalam piksel saat tombol terlihat;
Jika Anda melakukan semuanya sesuai instruksi, maka seharusnya tidak ada masalah dengan pembuatan tombol. Jadi, petunjuk langkah demi langkah:
A. Membuat file js
Buka notepad apa saja (saya sarankan Notepad++) paste kode di bawah ini dan simpan dengan ekstensi .js (misalnya gototop.js):
B.Pengaturan Gaya
Tambahkan kode berikut ke file gaya (file gaya adalah file dengan ekstensi .css). Paling sering namanya main.css atau style.css:
Dari pada top.png Anda harus memasukkan alamat lengkap atau relatif dari gambar Anda. Daripada 0px 0px dan -56px 0px Anda harus memasukkan offset Anda. Atau jangan gunakan offset, tapi cukup gunakan gambar yang berbeda saat diklik.
C. Menghubungkan skrip ke situs
Pada contoh di atas, kami menggunakan teknologi AJAX, jadi kami perlu menyertakan perpustakaan jquery. Anda juga perlu menyertakan file gototop.js yang Anda buat di paragraf pertama:
Dan di bagian paling bawah situs (sebelum tag body) tambahkan baris:
Saya mengumpulkan semua file yang diperlukan untuk ini di arsip: gototop.rar
2. Tombol tanpa AJAXPenerapan metode ini sangat sederhana, atau lebih tepatnya, sangat sederhana. Selain itu, saya bahkan akan membagi metode ini menjadi dua submetode.
2.1. Menggunakan jangkar tautanDi bagian atas situs kami menulis id untuk beberapa elemen. Masuk akal kalau ditulis sebagai judul, karena ini adalah awal isinya. Dan di bawah Anda dapat menempatkan tautan ke jangkar. Kodenya kira-kira seperti ini:
... Judul artikel...Kerugian dari metode ini sangat signifikan:
- Tombol kembali ke atas akan selalu terlihat meskipun pengguna sudah berada di atas
- Penting untuk mendaftarkan jangkar. Hal ini mungkin tidak selalu nyaman
- Peralihan ke atas terjadi secara tiba-tiba (tidak ada gerakan yang mulus)
Ada satu keuntungan: tidak perlu menggunakan skrip.
2.2. Menggunakan JavaScriptMetode JavaScript sangat mirip dengan yang sebelumnya. Tombol yang sama, hanya saja kali ini kita tidak perlu menambahkan jangkar ke semua halaman. Berikut kodenya:
...Gaya penulisannya dapat sama seperti pada contoh 2.1.
Saya yakin masih lebih baik menggunakan metode 1, karena metode ini memiliki efek visual yang lebih menyenangkan bagi pengguna, yang sangat penting di zaman ini.
Pada postingan kali ini kita akan membuat tombol “Atas”, intinya akan muncul ketika situs di-scroll ke bawah dan ketika diklik, pengguna akan diarahkan ke bagian atas halaman saat ini. Menurut saya, tidak ada gunanya menjelaskan banyak hal; kita semua pernah melihat tombol “kembali ke atas” yang serupa di banyak situs.
Rencanakan untuk membuat tombol “Kembali ke Atas”.1. Mari buat struktur html untuk tombol ini.
2. Mari kita menatanya. Mari kita membuatnya tidak terlihat dan menempatkannya di sebelah kanan relatif terhadap tepi halaman situs.
3. Mari kita menulis skrip yang akan menampilkan tombol setelah menggulir dan memproses klik pengguna pada tombol “Kembali ke Atas” itu sendiri.
Jadi, dengan rencana tindakan untuk membuat tombol ke atas, semuanya jelas, mari kita mulai menerapkannya :)
1. Mari buat struktur html untuk tombol “Kembali ke Atas”.Tempatkan kode tombol sebelum tag penutup
2. Gaya untuk tombol “Kembali ke Atas”.Saya memutuskan untuk membuat tombol dengan posisi tetap di pojok kanan bawah. Saya memberi ikon ukuran tetap, warna latar belakang, dan sudut membulat.
Saya juga menyesuaikan gaya untuk acara hover dan membuat transisi yang mulus menggunakan properti transisi.
/* Tombol kembali ke atas */ #kembali ke atas( posisi:tetap; indeks-z: 999; tampilan:tidak ada; bawah:70px; kanan:15px; kursor:penunjuk; ) #kembali ke atas i( lebar: 50px; tampilan:blok; latar belakang: #26ADE4; ukuran font: .3s semua; -moz-transisi: .3s semua;
3. Script untuk tombol “Kembali ke Atas”.Pertama, mari kita deklarasikan beberapa variabel. Batas pertama – akan berisi nilai 1/3 dari tinggi layar dan akan berfungsi sebagai syarat munculnya tombol “Kembali ke Atas”.
BackToTop kedua akan menyimpan pilihan tombol jQuery kita agar tidak mengaksesnya beberapa kali.
Batas var = $(jendela).height()/3, $backToTop = $("#back-to-top");
Mari kita tuliskan syarat munculnya dan hilangnya tombol kita. Kondisi dalam kasus kami adalah memeriksa apakah pengguna telah menggulir sepertiga layar atau belum.
Jika sudah di-scroll maka akan muncul tombol “Back to Top”; jika belum atau kembali ke atas maka akan hilang.
$(window).scroll(function () ( if ($(this).scrollTop() > limit) ( $backToTop.fadeIn(); ) else ( $backToTop.fadeOut(); ) ));
Sentuhan terakhir adalah mengikat acara klik ke tombol “Kembali ke Atas”. Ketika kita mengklik tombol tersebut, kita akan dibawa ke awal halaman saat ini. Kami akan melakukan ini dengan beberapa baris kode:
// gulir badan ke 0px saat klik $backToTop.click(function () ( $("body,html").animate(( scrollTop: 0 ), 1500); return false; ));
Seperti inilah keseluruhan kodenya
Batas var = $(window).height()/3, $backToTop = $("#back-to-top"); $(window).scroll(function () ( if ($(this).scrollTop() > limit) ( $backToTop.fadeIn(); ) else ( $backToTop.fadeOut(); ) )); // gulir badan ke 0px saat klik $backToTop.click(function () ( $("body,html").animate(( scrollTop: 0 ), 1500); return false; ));
KesimpulanJadi kita telah selesai mengerjakan pembuatan tombol “Kembali ke Atas”. Ini hanyalah salah satu opsi, yang dapat Anda diversifikasi dengan membuat perubahan pada bagian CSS pada postingan ini.
Artikel demo menggunakan efek CSS yang dijelaskan dalam postingan ini
