Cara Memasang Back to Top Button (Smooth) di Blog

Table of Contents

Jaringan Sibuk - Pada kesempatan kali ini Admin akan coba membagikan Cara Memasang Back to Top Button (Smooth) di Blog dan mungkin cara seperti ini sudah banyak yang share.

Akan tetapi apa salahnya Admin share kembali siapa tau saja masih banyak yang belum bisa menerapkan nya di blog. 

Untuk Kamu yang belum tahu caranya bisa ikuti langkah-langkah di bawah ini ya dengan seksama dan untuk yang sudah tahu caranya bisa menyimak saja, ok ya.

Kita langsung saja ya, jika Kamu berminat menerapkan nya silahkan pasang terlebih dahulu code dibawah ini tepat sebelum </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika code di atas sudah terpasang selanjutnya silahkan Kau pasang code CSS di bawah ini dan letakkan tepat sebelum </style> atau bisa juga sebelum </b:skin>

.smoothscroll-top {

    position:fixed;

    opacity:0;

    visibility:hidden;

    overflow:hidden;

    text-align:center;

    z-index:99;

    background-color:#2ba6e1;

    color:#fff;

    width:47px;

    height:44px;

    line-height:44px;

    right:25px;

    bottom:-25px;

    padding-top:2px;

    border-radius:5px;

    transition:all 0.5s ease-in-out;

    transition-delay:0.2s;

}

.smoothscroll-top:hover {

    background-color:#3eb2ea;

    color:#fff;

    transition:all 0.2s ease-in-out;

    transition-delay:0s;

}

.smoothscroll-top.show {

    visibility:visible;

    cursor:pointer;

    opacity:1;

    bottom:25px;

}

.smoothscroll-top i.fa {

    line-height:inherit;

}

Setelah memasang code CSS di atas langkah selanjutnya silahkan Kamu letakkan code di bawah ini tepat sebelum </body>

<div class="smoothscroll-top">

    <span class="scroll-top-inner">

        <i class="fa fa-2x fa-arrow-circle-up"></i>

    </span>

</div>

<script type='text/javascript'>

//<![CDATA[

$(function(){

    $(document).on( 'scroll', function(){

        if ($(window).scrollTop() > 100) {

            $('.smoothscroll-top').addClass('show');

        } else {

            $('.smoothscroll-top').removeClass('show');

        }

    });

    $('.smoothscroll-top').on('click', scrollToTop);

});

function scrollToTop() {

    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;

    element = $('body');

    offset = element.offset();

    offsetTop = offset.top;

    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');

}

//]]>

</script>

Selanjutnya, untuk langkah terakhir silahkan Kamu save template nya dan bisa lihat hasilnya di blog Kamu. 

Akhirnya, mungkin itu saja dari Admin cukup dulu tentang Cara Memasang Back to Top Button (Smooth) di Blog, semoga dapat bermanfaat.

Selamat mencoba ya.

Terima Kasih.