Cara Membuat Tombol Back to Top - Kembali ke Atas di Blogger

Baca Juga

Cara Memasang / Membuat Tombol Back to Top (Kembali ke Atas) di Blogger.

BERIKUT ini Cara Membuat Tombol Back to Top - Kembali ke Atas di Blogger.

Fungsi Back to Top button ini memudahkan pengguna kembali ke halaman atas dalam satu klik atau satu sentuhan (tap).

Tombol kembali ke atas ini baur muncul saat halaman discroll ke bawah.

Tombol kembali ke bagian paling atas halaman ini menjadi salah satu trending desain web/blog yang harus diikuti sesuai dengan prinsip "pengalaman pengguna" (user experience).

Cara mudah memasang tombol kembali ke atas

1. Layout/Tata Letak > Add a Gadget/Tambah Gadget
2. Pilih HTML/Javascript
3. Copas kode berikut ini:

<!--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: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgocMWCcTTcPj955KetdUhbi3lGDoKagBpjrSAn0LHl-biGfka74ctaniRds70gYBvGNGWZP8sfaSGdLv3dJMgBvWpD4bOyROmJLmqLKNZqZiR3E775vZ_sk__LDC9jR2AR3wbvvyGthJD6/s1600/back+to+top+.png" alt="Back to Top" / ></a>
<!--Smooth Back to Top Button End-->

4. Save!

Beres. Kini blog Anda sudah ada tombol back to top.

Cara Lain
Berikut ini cara lain pemasangan tombol ke atas di blog Anda.

Pasang Kode CSS
Simpan di atas kode ]]></b:skin>

#myBtn {display:none;position: fixed;bottom: 20px;right:30px;z-index:99;border:none;outline:none;background-color:#357ae8;color: white;cursor: pointer;padding: 15px;border-radius: 10px;font-size:20px}
#myBtn:hover {background-color: #555;}

Pasang Kode HTML
Simpan di atas kode </body>

<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>

Pasang Kode JavaScipt Kembali ke Atas
Simpan di atas kode

<script type='text/javascript'>
//<![CDATA[
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}
function topFunction() {
    document.body.scrollTop = 0; // For Chrome, Safari and Opera
    document.documentElement.scrollTop = 0; // For IE and Firefox
}
//]]>
</script>

KODE LAINNYA. Best! Recommended!

HTML & JS:
Pasang di atas kode </body>

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

CSS:
Pasang di atas kode ]]></b:skin>

#back-to-top {
background:#000000;
color:#ffffff;
padding:8px 10px;
font-size:24px;
border-radius: 22px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15), 0 1px 1px 0 rgba(0,0,0,.30);
}
.back-to-top {
position: fixed !important;
position: absolute;
bottom: 25px;
right: 20px;
z-index: 998;
}

PENTING!
Link ke Awesome Font
Pastikan di template blog Anda sudah terpasang Link ke Awesome Font di atas kode </head>

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

Demikian Cara Membuat Tombol Back to Top - Kembali ke Atas di Blogger. Good Luck! (www.contohblog.com).*

Sumber