Fungsi dari tombol back to top sendiri cukup penting peranannya karena memberikan kemudahan bagi pengunjung yang ingin mengscroll kembali keatas dengan satu tombol.
Cara Memasang Smooth Back To Top Di Blog
1. Pastikan template telah terpasang Fontawesome atau belum. Jika sudah terpasang bisa melewati langkah pertama, jika belum terpasang silahkan Login ke Blogger Dashbor > pilih blog > pilih template > klik edit HTML, simpan kode dibawah ini setelah <head> atau sebelum </head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>2. Simpan CSS dibawah ini sebelum ]]></b:skin> atau </style>
.smoothscroll-top {
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>
<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> 4. Setelah itu simpan template dan lihat hasilnya.
- Baca juga Cara Memasang Font Awesome Di Blog
Dengan tambahan efek Bounce
<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').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>
Jika template sudah terpasang tombol back to top, silahkan hapus terlebih dahulu. settingan warna bisa diatur sesuai selera masing-masing.
Demikian artikel tentang Cara Memasang Smooth Back To Top Di Blog, semoga bermanfaat.Sumber : Arlina Design
