Membuat Tombol Back To Top Ala Evo Magz Terbaru

Membuat tombol kembali keatas dengan efek tertentu mungkin sudah banyak sekali yang membagikan tips trik tersebut. Tetapi menurut saya yang membagikan cara membuat tombol back to top seperti pada template Evo Magz itu jarang sekali.

Nah, untuk itu saya akan membagikan cara sederhana, agar kita bisa membuat tombol kembali keatas seperti template Evo Magz buatan mas sugeng ini. Bagi anda yang belum tahu apa itu back to top, tombol back to top biasanya terletak disamping tampilan blog sebelah bawah.

Ya.. namanya saja Back to top, Langsung saja kita menuju kepembahasan bagaimana cara simple membuat tombol tersebut. Untuk contoh tombol bisa anda lihat pada gambar dibawah ini:

1. Letakkan kode dibawah ini tepat diatas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

2. Kemudian tambahkan CSS dibawah ini tepat sebelum kode </style> atau ]]><b:skin> 

#back-to-top{background:#E73037;color:#ffffff;padding:8px 10px;font-size:24px}
.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

3. Setelah itu kita tambahkan kode terakhir ini, tepat diatas kode </body> paling bawah

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'/>
</a></div>
<script>          
$(window).scroll(function() {
    if($(this).scrollTop() &gt; 200) {
        $(&#39;#back-to-top&#39;).fadeIn();
    } else {
        $(&#39;#back-to-top&#39;).fadeOut();
    }
});
$(&#39;#back-to-top&#39;).hide().click(function() {
    $(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
    return false;
});
</script> 

 4. Simpan template, dan setelah itu lihat hasilnya!

Jika pengaturan sudah tersimpan, cobalah anda lihat hasilnya, untuk melihatnya, anda bisa menscroll kebawah, tombol ini berada dibawah sebelah kanan blog anda. Jika ada berarti anda telah berhasil melakukan langkah-langkah Membuat Tombol Back To Top Ala Evo Magz Terbaru ini.

Sekian terlebih dahulu tutorial saya kali ini, semoga bermanfaat. Jangan lupa bagikan artikel ini keteman anda. Terima kasih.