Langsung ke konten utama

Membuat Tombol "Back To Top" di Website/Blog

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-
Membuat Tombol "Back To Top" di Website/Blog

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"
Sebelum melakukan editing ini disarankan untuk selalu backup desain template anda ssebelumnya. Baiklah, langsung saja kita memulai tutorial untuk blog kali ini.

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 2
Salin 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 3
Salin 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;
}

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>

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.
Label:

Komentar

Posting Komentar

Komentar dan Kritik kawan diperlukan agar dapat membangun pemula belajar kedepannya. Terima Kasih

Postingan populer dari blog ini

Tutorial Lengkap Membuat Short Link Sendiri Dengan PHP Mysql

Hallo kawan, berjumpa lagi nih sama toturial www.pemulabelajar.com. Kali ini kita akan membahas cara membuat short link sendiri . Pernah dong kawan menjumpai namanya short link, contoh sederhananya saja goo.gl . goo.gl akan membuat url site kita menjadi lebih pendek misalnya saja : http://www.pemulabelajar.com bisa menjadi goo.gl/Jiahs . Begitu juga tutorial kita membuat short link kali ini. Karena membuat short link kita sekarang menggunakan PHP Mysql maka kawan disarankan untuk membuat hosting untuk website yang akan dijadikan website short link kita sendiri, kawan bisa menggunakan layanan gratis seperti 000webhosting.com atapun idhostinger.com (recomended) selain gratis, pembuatan databasenya juga termasuk mudah dan juga tutorialnya sangat banyak digoogle kalau ada waktu saya akan membuatkan tutorial membuat hosting gratis untuk kawan. Membuat Short Link Saya anggap saja kawan sudah membuat hosting disalah satu tempat hosting diatas. Maka langkah a...
28 komentar
Baca selengkapnya

Belajar Power Design - Cara Membuat Project Menjadi Gambar

Cara Membuat Project Menjadi Gambar - Artikel ini akan membahas sedikit tentang Power Design dan Bagaimana merubah project power design menjadi sebuah gambar . Masalah ini sering dialami oleh pemula khususnya saya yang bingung bagaimana merubah sebuah project power design menjadi berupa gambar agar mudah dimuat ke sebuah karya tulis. Baca juga : Membuat Teks Rotasi Dengan Photoshop Apa itu Power Design ? Power design adalah sebuah paket program desain tools yang digunakan untuk membuat Visualisasi, dokumentasi dan mendesain suatu sistem perangkat lunak. Paket ini meliputi Process analyst Model (PAM), Data architect tools, Aplication modeler tools, dan Metawork tools. Power Design ini juga sering digunakan menjadi software untuk membuat Diagram Flow Diagram atau DFD . Bagaimana Merubah Project Menjadi Gambar ? Untuk merubah sebuah project pada power design menjadi sebuah gambar cukup mudah. Secara singkatnya kawan cukup memilih semua object yang akan dijadikan sebuah gambar, s...
Posting Komentar
Baca selengkapnya

Belajar Web - Membuat Website Responsive CSS

Sebelum kita meneruskan tutorial selanjutnya yaitu Belajar Membuat Website Responsive baiknya kita pelajari terlebuh dahulu apa aja yang akan kita bahas. Karena yang akan kita bahas selanjutnya adalah responsive web, maka diwajibkan mengerti fungsi script css yang ada di Belajar Desajn Website di html / php toturial sebelumnya. Apa itu float ? Apa itu width ? Apa itu height ? Apa itu clear: both ? Responsive ini memakai @media(max-width) atau @media(min-width) yang memiliki arti lebar maximal style dan lebar minimal yang kita masukkan di dalam @media tersebut. Sebelum memperlajari responsive menu sebaiknya lita pelajari dulu float, clear dan lain-lain. Karena @media tersebut hanya mengganti script css dari css global. Apa itu css global ? Nanti anda penjelasannya masing-masing. Apakah anda sudah ngerti dengan coding css diatas ? Jika belum, ada baiknya anda harus pelajari dulu scriptnya di toturial sebelumnya. Cara memperbaiki jika terjadi error atau kesalahan penulidan pada d...
Posting Komentar
Baca selengkapnya