Cara Memasang Progress ScrollBar Pure Javascript

Apakah anda pernah melihat sebuah website yang mempunyai fitur scroll bar pure ? mungkin anda sudah pernah melihat dengan sendirinya, tetapi tidak tau apa nama fitur tersebut. progress scrollbar pure adalah sebuah fungsi saat anda scroll mouse anda ke arah bawah dan atas dengan tampilan di atas ada progress yang bergerak dari kanan ke kiri.

Mungkin anda masih pusing, silahkan ikuti tutorial artikel ini untuk memasang progress nya di blog anda sendiri.

Lihat Juga : Cara Backup & Import Semua Artikel Di Blog

Membuat Animasi Progress ScrollBar Di Blog

1. Theme > Edit HTML, Cari kode </body>
2. Salin script javascript di bawah ini, lalu letakkan di atas </body>

<script type="text/javascript">
//<![CDATA[
//Surya Pero | Progress Scrollbar
var bar_bg = document.getElementById("scrollbar-bg"),
    body = document.body,
    html = document.documentElement;

bar_bg.style.minWidth = document.width + "px";

document.getElementsByTagName("body")[0].onresize = function() {
    // Update the gradient width
    bar_bg.style.minWidth = document.width + "px";
}

window.onscroll = function() {
    // Change the width of the progress bar
    var bar = document.getElementById("scrollbar"),
        dw  = document.documentElement.clientWidth,
        dh  = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight ),
        wh  = window.innerHeight,
        pos = pageYOffset || (document.documentElement.clientHeight ?
                              document.documentElement.scrollTop : document.body.scrollTop),
        bw  = ((pos / (dh - wh)) * 100);

    bar.style.width = bw + "%";
}
//]]>
</script>

3. Selanjutnya cari kode </head>, salin kode css di bawah ini, tepat di atas </head>

<style type="text/css">
#scrollbar {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 0%;
    height: 4px;
    z-index: 9999;
}

#scrollbar-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:#F62869;
}
</style>

4. Simpan themplate.
5. Lihat hasil di blog anda sendiri.

Sekin artikel tentang memasang progress scrollbar pure di blog. semoga bermanfaat untuk anda.

Berbagi :