Cara menambahkan tombol kembali ke atas yang lengket di situs web/ blog Anda

Dalam beberapa tahun terakhir, tombol back-to-top (atau tombol gulir-ke-atas) telah meningkat popularitasnya. Ketika pengguna menggulir melewati titik tertentu di situs web, tombol yang membantu ini muncul, memungkinkan pengguna untuk dengan mudah kembali ke bagian atas halaman. Ini adalah fitur yang sangat berguna mengingat seberapa banyak konten yang dibagikan pada berbagai perangkat dengan layar yang lebih kecil.
Contoh di sebelah kiri adalah tombol gulir-ke-atas yang akan saya tunjukkan cara membuat dalam posting ini. Saya benar-benar menggunakannya untuk situs acara yang baru-baru ini saya rancang. Dalam banyak kasus, pengguna situs berada di perangkat seluler mereka sebelum dan selama acara berlangsung, sehingga memiliki tombol back-to-top sangat berguna.
contoh back-to-top
Kami akan menggunakan Font Awesome untuk menyediakan ikon panah ke atas di tombol. Anda mungkin akrab dengan Bootstrap , dan itu juga akan berfungsi dengan baik. Dukungan untuk glyphicons dibangun langsung ke Bootstrap, dan Anda masih dapat menerapkan konsep dari tutorial ini.
luar biasa
Kami akan menerapkan tombol fixed-position, atau sticky, yang tersembunyi atau terlihat tergantung di mana pengguna berada di halaman. Tiga elemen bekerja bersama untuk membuat tombol:
  • HTML untuk markup
  • jQuery untuk membuat perilaku tombol
  • CSS untuk memberi styling dan privasi

Ingat: Anda tidak boleh melakukan perubahan pada situs langsung. Aplikasi pengembangan lokal gratis kami, Lokal oleh Roda Gila, akan membantu Anda menyederhanakan alur kerja dan bereksperimen dengan aman dengan situs Anda. Coba hari ini!

Tambahkan jQuery ke situs Anda

Pertama, periksa untuk melihat apakah Anda sudah menggunakan jQuery di situs Anda dengan melihat Sumber halaman Anda. Jika Anda menggunakan Chrome, cukup buka Lihat> Pengembang> Lihat Sumber . Lakukan Cari dan ketik "jquery." Jika sudah ada, Anda jelas tidak perlu khawatir tentang menambahkan jQuery. Jika jQuery belum ditambahkan, tambahkan kode ini tepat sebelum </body>tag halaman:
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>

Buat itu mengagumkan dengan Font Awesome

Sebelum </head>tag penutup , mari tambahkan Font Keren. Font Awesome memiliki banyak opsi untuk ikon, jadi Anda mungkin ingin melihat-lihat.
<link rel=”stylesheet” id=”font-awesome-css” href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” type=”text/css” media=”screen”>

Font Awesome adalah alat yang luar biasa. Pelajari mengapa Anda harus mulai menggunakannya di sini.

Tambahkan HTML

Jadi di mana kita harus meletakkan kode ini? Tombol ini memiliki posisi tetap, jadi sebenarnya tidak ada aturan ketat. Saya pribadi ingin meletakkannya setelah footer sehingga setelah semua konten halaman. Ingatlah untuk menyimpannya di dalam <body>tag.
Jika Anda ingin ikon panah-atas disertakan, gunakan iclass ini :
<a href=”#” class=”back-to-top” style=”display: inline;”>
<i class=”fa fa-arrow-circle-up”></i>
</a>

iclass di mana kita tentukan Font ikon Modifikasi, dalam hal ini panah atas. Di sisi lain, Anda dapat menggunakan teks sebagai ganti ikon:
<a class=”back-to-top” style=”display: inline;” href=”#”>Back to Top</a>

Tambahkan styling CSS

Jika Anda menggunakan lembar gaya terpisah, Anda dapat menempelkan gaya yang tercantum di bawah ini. Jika Anda hanya bereksperimen untuk saat ini, Anda dapat menempelkannya sebelum </head>tag penutup .

<style>
.back-to-top {
background: none;
margin: 0;
position: fixed;
bottom: 0;
right: 0;
width: 70px;
height: 70px;
z-index: 100;
display: none;
text-decoration: none;
color: #ffffff;
background-color: #ff9000;
}
  
.back-to-top i {
  font-size: 60px;
}
</style>
 .back-to-topclass adalah titik awal untuk bagaimana tombol akan terlihat. Secara default, ini mengambil atribut styling jangkar kami. Jika Anda perlu lebih spesifik, Anda dapat menambahkan atribut warna dan latar belakang-warna.
Perhatikan bahwa memiliki nilai indeks-z pada 100 sangat penting untuk menghindari tumpang tindih dengan elemen lainnya. Class bertingkat imemiliki ukuran font tertentu yang cukup besar, sehingga tombol kami tidak hanya terlihat tetapi cukup besar bagi pengguna untuk mengetuk layar sentuh.

Jadikan semuanya terjadi dengan jQuery

Di sinilah semua keajaiban terjadi.
Jika Anda memiliki file terpisah di mana Anda menyimpan semua jQuery / JavaScript, Anda dapat menempel skrip ini di sana. Dalam hal ini, Anda tidak memerlukan tag skrip pembuka dan penutup. Tetapi untuk keperluan percobaan, Anda dapat menempel ini tepat setelah panggilan ke jQuery (Anda mungkin telah menempelkannya tepat sebelum </body>tag penutup ).
<script>
jQuery(document).ready(function() {
var offset = 250;
var duration = 300;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery(‘.back-to-top’).fadeIn(duration);
} else {
jQuery(‘.back-to-top’).fadeOut(duration);
}
});
jQuery(‘.back-to-top’).click(function(event) {
event.preventDefault();
jQuery(‘html, body’).animate({scrollTop: 0}, duration);
return false;
})
});
</script>
Mari kita uraikan ini sehingga kita mendapatkan ide yang lebih baik tentang apa yang terjadi di sini.
Kami memiliki dua variabel, offset dan durasi. Offset menggambarkan kapan tombol akan muncul: ketika pengguna menggulir ke tanda 250px. Durasi 300, yang berarti akan muncul dalam 300 milidetik.
Fungsi gulir memungkinkan tombol terlihat. Fungsi scrollTop adalah apa yang kami gunakan untuk posisi gulir saat ini. Apa pun yang melebihi 250 akan menampilkan tombol dengan fungsi fadeIn. Ketika posisi ini lebih besar dari offset, tombol muncul.
Fungsi fadeIn adalah apa yang membuat tombol muncul, dan durasinya adalah kecepatan yang muncul. Ketika offset kurang dari 250, tombol tidak terlihat. Ini tidak akan terlihat sampai pengguna menggulir ke posisi itu, dan jika mereka menggulir ke atas di atas posisi itu, tombol itu akan hilang. Ini terlihat dalam fungsi fadeOut. Fungsi animasi adalah yang memungkinkan kita untuk menggulir ke atas.
Tombol back-to-top adalah elemen mudah untuk diterapkan di situs Anda dan juga sangat bermanfaat bagi pengguna Anda. Jadi lanjutkan!
Share on Google Plus

Tentang Pena Umi Production Studio

Channel Inspirasi Wanita Indonesia Didedikasikan untuk semua Wanita Indonesia. Bersatu membangun komunikasi dan saling berbagi informasi.

0 komentar:

Post a Comment