Melihat banyaknya Tutorial Blog tentang Membuat Tombol Back To Top dengan menggunakan JQuery. Saya juga berkeinginan untuk membuat Tutorial Membuat Back To Top dengan JQuery. Saya melihat artikel ingin membuat tombol "Back to Top" tapi script "Back to Top" berasa panjang dan susah dimengerti fungsinya masing-masing. Skip-
Sebelum melanjutkan Tutorial Membuat Back To Top dengan JQuery ada baiknya kita melihat point-point dibawah ini.
- 1. Menggunakan Font Awesome
- 2. Menggunakan JQuery
- 3. Membuat tombol "Back To Top"
- 4. Kode JQuery untuk "Back To Top"
Menggunakan Font Awesome
Font awesome adalah sekumpulan icon menarik yang pembawaanya cukup ringan untuk website. Font awesome ini juga tidak berupa gambar cuma tulisan yang berbentuk gambar. Lebih kurangnya seperti itulah. Jika kawan sudah memiliki font awesome diwebsite bisa melanjutkan point 2Salin kode dibawah ini dan letakkan kode berikut diatas
</head>. Kalau untuk blogger bisa meletakan diatas <b:skin> dikarenakan nanti jika suatu saat berkeinginan untuk meletakkan sebuah icon di link atau sebagainya didalam css lebih mudah.
Kode Link Font Awesome
<link href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet' type='text/css'/>
Menggunakan JQuery
Agar lebih mudah kita gunakan JQuery untuk membuat tombol "Back To Top" ini. Sama pada penjelasan point nomor 1 jika kawan sudah memiliki Jquery diwebsite bisa melanjutkan point 3Salin kode dibawah ini dan letakkan kode berikut diatas
</head>. Bisa juga meletakkan di atas </body> tapi berasa kurang apdol aja. Skip -
Kode Link JQuery Terbaru
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
Membuat Tombol "Back To Top"
Kita buat dulu tombol "Back To Top" didalam <body> letakkan dimana saja yang penting ingat letak dari tombol "Back To Top". Dan, salin kode berikut ini.
Kode "Back To Top" HTML
<div id='top-menu'><i class='fa fa-arrow-up fa-fw'/></div>
Ket : Class fa fa-arrow-up fa-fw adalah class yang dihasilkan oleh font-awesome Baca point pertama tadi.
Sekarang kita buat css untuk tombol "back to top" agar terlihat lebih bagus. Salin kode berikut dan tempelkan di file css kawan, atau bisa di dalam
<b:skin> (untuk blogger).
Kode "Back To Top" CSS
#top-menu {
display: none;
position: fixed;
font-size: 30px;
bottom: 20px;
right: 10px;
background-color: #16a085;
color: #fff;
border-radius: 6px;
z-index: 6;
width: 40px;
height: 40px;
overflow: hidden;
cursor:pointer;
}
display: none;
position: fixed;
font-size: 30px;
bottom: 20px;
right: 10px;
background-color: #16a085;
color: #fff;
border-radius: 6px;
z-index: 6;
width: 40px;
height: 40px;
overflow: hidden;
cursor:pointer;
}
Kode JQuery untuk "Back To Top"
Pada point ketiga penambahan css tombol "Back To Top" adalah agar tidak selalu muncul, maka untuk membuat "Back To Top" pada tutorial ini muncul secara otomatis dan hilang secara otomatis maka tambahkan kode JQuery untuk "Back To Top" dibawah ini. Letakkan diatas kode </body> atau paling bawah.
"Back To Top" dengan JQuery
<script type='text/javascript'>
$(function() {
$(window).scroll(function() {
if($(this).scrollTop()>600) {
$('#top-menu').slideUp('slow');
} else {
$('#top-menu').slideDown('slow');
}
});
$('#top-menu').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
$(function() {
$(window).scroll(function() {
if($(this).scrollTop()>600) {
$('#top-menu').slideUp('slow');
} else {
$('#top-menu').slideDown('slow');
}
});
$('#top-menu').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
Simpan kode tersebut dan coba refresh (tekan
F5). Lihat halaman website kawan ketika kawan scroll 600 pixel kebawah apakah tombol Back To Top muncul dibawah samping kanan.Sekian artikel Tutorial Web tentang Membuat Tombol "Back To Top". Semoga artikel ini membantu kawan dan jika berkenan klik tombol share bawah judul artikel ini. Salam dan Terima Kasih.
