Ada berbagai macam cara untuk kembali ke halaman awal blog, dan fasilitas back to top merupakan cara yang dilakukan oleh para blogger, oleh karena itu back to top ada yang merupakan bawaan template blog atau hasil modifikasi sendiri dengan berbagaimacam tutorial, oleh karena itu saya ingin membagikan secara singkat cara memasang tombol back to top dengan icon font awesome yang sangat booming saat ini, mari kita lakukan hal berikut ini
1. Masuk ke dasbor blogger anda dan pilih blog > Pilih template > kemudian klik edit html simpan code di bawa ini di atas kode <head> atau </head>
2. Simpan CSS di bawah ini tepat di atas ]]></b:skin> atau </style>
1. Masuk ke dasbor blogger anda dan pilih blog > Pilih template > kemudian klik edit html simpan code di bawa ini di atas kode <head> atau </head>
<style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
2. Simpan CSS di bawah ini tepat di atas ]]></b:skin> atau </style>
<style>
<div class="smoothscroll-top">
<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>
3. Simpan JQuery ini tepat di atas </body><style>
<div class="smoothscroll-top">
<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>