Memasang Smooth Back To Top - Mungkin sobat sudah banyak membaca turorial memasang smooth back to top di internet. Kali ini Hobby Klik akan membahas kembali.
Fungsi dari tombol back to top ini bagi saya sangat membantu, karena saya tidak akan lagi capek untuk scroll mouse untuk kembali ke posisi awal, dan kita hanya perlu meng 'KLIK' satu tombol saja sobat.
Berikut cara pemasangannya:
1. Login ke blog sobat, masuk ke Template>Ke Edit HTML.
Simpan kode dibawah ini setelah <head> atau sebelum </head>
<link href ='https://macdb.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
2. Simpan CSS dibawah ini sebelum ]]></skin> atau </style>
position:fixed;
opacity:0;
visibility:hidden;
overflow:hidden;
text-align:center;
z-index:99;
background-color:#2ba6e1
color:#fff;
width:47px;
height:44px;
line-height:44px;
right:25px;
bottom:-25px;
padding-top:2px;
border-radius:5px;
transition:all 0.5s ease-in-out;
transition-delay:0.2s;
}
.smoothscroll-top:hover; {
background-color:#3eb2ea;
color:#fff;
transition:all 0.2s ease-in-out
transition-delay:0s;
}
.smoothscroll-top.show {
visibility:visible;
cursor:pointer;
opacity:1;
bottom:25px;
}
.smoothscroll-top i.fa {
line-height:inherit;
}
3. Simpan jQuery dan HTML dibawah ini sebelum </body>
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
});
$('.smoothscroll-top').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>
4. Setelah itu simpan template, dan sobat bisa melihat hasilnya.
Oke itulah kira-kira tutorial memasang back to top pada sebuah blog dari Hobby Klik, Semoga bisa bermanfaat bagi sobat-sobat semua.
TERIMA KASIH
No comments:
Post a Comment