tRikSonic
Tema
/ / Cara Mudah Membuat Back To Top di Blog

Cara Mudah Membuat Back To Top di Blog

Terakhir diperbarui : 25 Mei 2018 - 08.14
/ / Cara Mudah Membuat Back To Top di Blog

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.
Back To Top

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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body id="bodyID">

<article>Artikel atau kontent</article>
<article>Artikel atau kontent</article>
<article>Artikel atau kontent</article>
<article>Artikel atau kontent</article>
<article>Artikel atau kontent</article>

<a id="backtoTop" href="#bodyID" title="Back to Top">
  <span class="caret-up"></span>
</a>

</body>
</html>
/*css pada template atau thema akan berpengaruh*/
#backtoTop {
    position: fixed;
    bottom: 15px;
    right: 15px;
    background: #333131;
    padding: 10px 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.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;
}

/*ini hanya untuk demo*/
article {
 border : 1px solid silver;
    height : 500px;
    background : pink;
    padding : 15px;
    margin-bottom : 25px;
}
//javascript
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);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<!--jquery library-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body id="bodyID">

<h2>Scroll kebawah untuk menampilkan tombol back to top</h2>
<p>Klik Tombol CSS dan JS untuk membuka panel css dan javascript</p>
<article>Artikel atau kontent</article>
<article>Artikel atau kontent</article>
<article>Artikel atau kontent</article>
<article>Artikel atau kontent</article>
<article>Artikel atau kontent</article>

<a class="no-display" id="backtoTop" href="#bodyID" title="Back to Top">
  <span class="caret-up"></span>
</a>

</body>
</html>
/* css pada template atau thema mungkin akan berpengaruh*/
/* silahkan dimodifikasi lagi agar sesuai keinginan*/

#backtoTop {
    display : none;  /*posisi default*/
    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;
}

/*ini hanya untuk demo*/
article {
    border : 1px solid silver;
    height : 500px;
    background : pink;
    padding : 15px;
    margin-bottom : 25px;
}
$(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()
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body id="bodyID">

<h2>Scroll kebawah untuk menampilkan tombol back to top</h2>
<p>Klik Tombol CSS dan JS untuk membuka panel css dan javascript</p>

<article>Artikel atau kontent</article>
<article>Artikel atau kontent</article>
<article>Artikel atau kontent</article>
<article>Artikel atau kontent</article>
<article>Artikel atau kontent</article>

<a id="backtoTop" href="#bodyID" title="Back to Top">
  <span class="caret-up"></span>
</a>

</body>
</html>
/* css pada template atau thema mungkin akan berpengaruh*/
/* silahkan dimodifikasi lagi agar sesuai keinginan*/

#backtoTop {
    display : none; /*posisi default*/
    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;
}

/*ini hanya untuk demo*/
article {
    border : 1px solid silver;
    height : 500px;
    background : pink;
    padding : 15px;
    margin-bottom : 25px;
}
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.
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.