Memiliki blog aktif dengan artikel yang banyak dan panjang, tentunya sobat membutuhkan tombol back to top di kanan bawah blog, tujuannya agar pembaca tidak kerepotan untuk kembali ke halaman atas dengan satu kali klik setelah membaca artikel yang cukup panjang..
langsung saja..
1. Pastikan template sobat memiliki kode html seperti ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
Jika belum copy code di atas dan paste pada template dengan posisi diatas </head>
2. Simpan template dan masuk ke tata letak tambah gadget/widget html/java script dimanapun lokasinya copy-pastekan script berikut.
<!--Smooth Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
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>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color:transparent;
font-size: 12px;
padding: 1em;
display: none;
z-index:9999;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQvUM8T7TrPA_MDZ6ka-TGca8GDsp5ZO3F_pRQSo70ekRFznC4KH8uxjzuA9_v5KAVuhpr3jajHqaZF6JmTzhcnw4bL4SrEKc2bdqoFLjzTsPQATHosrFYaLLZwJo_xn-EIyzbtezdD7s/s1600/panah7.png" alt="Back to Top" / /></a>
<!--Smooth Back to Top Button End-->
Note:
Tulisan berwarna merah bisa diganti dengan URL gambar icon yang sobat miliki.
Semoga bermanfaat.
Belum ada tanggapan untuk "Membuat Panah Back to Top Pada Blog (Responsive)"
Posting Komentar