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

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

BERIKUT ini Cara Membuat Tombol Back to Top - Kembali ke Atas di Blogger. Hasil atau demonya mampu dilihat di CB News, kanan bawah.

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

Berikut cara pemasangannya di blog Anda.

Pasang Kode CSS
Simpan di atas instruksi ]]></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 instruksi </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 instruksi

<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>

Link ke Awesome Font
Pastikan di template blog Anda sudah terpasang Link ke Awesome Font di atas instruksi </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! 

Sumber

Berbagi :