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

UPDATE!

13/10/2026

Cara membuat tombol Back to Top yang ringan (fast loading), responsif, dan tanpa menggunakan gambar (murni HTML, CSS, serta JavaScript ringan) dapat dilakukan dengan kode berikut.

1. Kode HTML

Letakkan kode ini di bagian bawah sebelum tag penutup </body>.

<a href="#" id="backToTop" class="back-to-top" title="Kembali ke atas">

  <span class="arrow-up">&#8593;</span>

</a>

2. Kode CSS (Responsive & Ringan)

Tambahkan kode ini ke dalam file CSS atau bagian <style> di template Anda.

/* Posisi dan Desain Tombol */

.back-to-top {

  position: fixed;

  bottom: 20px;

  right: 20px;

  z-index: 999;

  display: none; /* Disembunyikan secara default */

  width: 45px;

  height: 45px;

  background-color: #333;

  color: #fff;

  text-align: center;

  line-height: 45px;

  border-radius: 50%;

  text-decoration: none;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

  transition: background-color 0.3s, transform 0.3s;

}

.back-to-top:hover {

  background-color: #007bff;

  transform: scale(1.1);

}

.arrow-up {

  font-size: 20px;

  font-weight: bold;

}

/* Responsif untuk layar HP / Mobile */

@media screen and (max-width: 480px) {

  .back-to-top {

    bottom: 15px;

    right: 15px;

    width: 40px;

    height: 40px;

    line-height: 40px;

  }

}

3. Kode JavaScript (Ringan & Smooth Scroll)

Tambahkan skrip ini sebelum tag penutup </body>:

 <script type='text/javascript'>

//<![CDATA[

  const backToTopButton = document.getElementById("backToTop");

// Munculkan tombol saat halaman di-scroll ke bawah lebih dari 200px

window.addEventListener("scroll", () => {

  if (window.scrollY > 200) {

    backToTopButton.style.display = "block";

  } else {

    backToTopButton.style.display = "none";

  }

});

// Efek kembali ke atas secara mulus (smooth)

backToTopButton.addEventListener("click", (e) => {

  e.preventDefault();

  window.scrollTo({

    top: 0,

    behavior: "smooth"

  });

});

  //]]>

</script>

Kelebihan Metode Ini:

• Fast Loading: Tidak memuat file gambar atau library berat seperti jQuery.

• Responsive: Ukuran dan posisi otomatis menyesuaikan tampilan desktop maupun ponsel.

• Smooth Scroll: Pergerakan layar saat diklik terasa halus

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

Sumber