Tutorial Membuat Back to Top
Cara Membuat Tombol Back to top, Memasang Tombol Back to Top, Back to Top keren, Back to Top Pure Javascript, Back to Top jQuery, Cara Membuat Tombol Back to Top HTML
Cara Mudah Membuat Back To Top di Blog - Kali ini saya akan share tentang cara membuat Tombol Back to Top di Blog, tombol back to top akan sangat berguna bagi pengunjung blog kita melakukan navigasi saat membaca artikel yang panjang, terlebih jika pengunjung blog menggunakan pernagkat mobile atau handphone.
CSS Tombol Back to Top
Silahkan copy dan pastekan css berikut kedalam elemen<style>...</style> atau <b:skin>...</b:skin>. CSS ini akan kita terapkan untuk semua demo tentang cara membuat back to top di blog.
Mungkin css dibawah ini terdapat perbedaan sedikit pada demo yang menggunakan javascript, dapat dilihat pada posisi
display : none;
/* css pada template atau thema mungkin akan berpengaruh*/
/* silahkan dimodifikasi lagi agar sesuai keinginan*/
/*element a to top*/
#backtoTop {
position: fixed;
bottom: 15px;
right: 15px;
background: #333131;
padding: 10px 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
/* tanda panah keatas*/
.caret-up {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top-width: 0;
border-bottom: 18px solid #ffffff;
border-right: 14px solid transparent;
border-left: 14px solid transparent;
margin: 0;
}
Tombol Back to Top hanya dengan Attribute HTML
Contoh berikut hanya dengan memanfaatkan attribute href pada element<a>...</a>.
Contoh :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body id="bodyID">
<!-- artikel panjang disini -->
<a id="backtoTop" href="#bodyID" title="Back to Top">
<span class="caret-up"></span>
</a>
</body>
</html>
Perhatikan tanda berstabilo dibawah ini, penulisannya harus sama
<body id="bodyID">...</body>
<a id="backtoTop" href="#bodyID">...</a>
Tombol Back to Top dengan JavaScript Library (jQuery)
Contoh membuat atau memasang Back to Top kali ini dengan memanfaatkan javascript library yaitu
jQuery. Untuk format html masih menggunakan cara yang pertama.
Pastikan library jquery sudah terpasang. Untuk demo ini saya menggunakan jQuery versi
1.12.4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
jQuery code :
$(function() {
$(document).on('scroll', function() {
if ($(window).scrollTop() > 500) {
$('#backtoTop').show();
} else {
$('#backtoTop').hide();
}
});
$(document).on('click','#backtoTop',backtoTop);
});
function backtoTop() {
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);
}
Tombol Back to Top dengan JavaScript murni
Contoh membuat atau memasang Back to Top berikut dengan menggunakan javascript mentah / murni yang bahasa gaulnya (pure javascript) :-) .
Untuk format html masih menggunakan cara yang pertama.
Javascript code :
function showhideBacktoTOP() {
document.body.scrollTop > 500 || document.documentElement.scrollTop > 500 ?
document.getElementById("backtoTop").style.display = "block" :
document.getElementById("backtoTop").style.display = "none"
}
function scrolltoToP(o, t) {
var e = document.documentElement;
if (0 === e.scrollTop) {
var c = e.scrollTop;
++e.scrollTop, e = c + 5 === e.scrollTop-- ? e : document.body
}
settingToTop(e, e.scrollTop, o, t)
}
function settingToTop(o, t, e, c) {
c <= 0 || ("object" == typeof t && (t = t.offsetTop), "object" == typeof e && (e = e.offsetTop), scrollTarget(o, t, e, 0, 1 / c, 10, trueTop))
}
function scrollTarget(o, t, e, c, l, n, T) {
c < 0 || c > 1 || l <= 0 ? o.scrollTop = e : (o.scrollTop = t - (t - e) * T(c), c += l * n, setTimeout(function() {
scrollTarget(o, t, e, c, l, n, T)
}, n))
}
function trueTop(o) {
return o
}
document.getElementById("backtoTop").onclick = function() {
scrolltoToP(0, 1000) /* 1000,2000,3000 dst.. */
}, window.onscroll = function() {
showhideBacktoTOP()
};
Tips : untuk bagian
<span class="caret-up"></span> bisa diganti dengan yang lainnya, misalkan font icon, svg, image, atau hanya sekedar teks biasa.- happy codding.