Headline
Loading...

Smooth Back To Top Dengan Font Awesome

Ada berbagai macam cara untuk kembali ke halaman awal blog, dan fasilitas back to top merupakan cara yang dilakukan oleh para blogger, oleh karena itu back to top ada yang merupakan bawaan template blog atau hasil modifikasi sendiri dengan berbagaimacam tutorial, oleh karena itu saya ingin membagikan secara singkat cara memasang tombol back to top dengan icon font awesome yang sangat booming saat ini, mari kita lakukan hal berikut ini

1. Masuk ke dasbor blogger anda dan pilih  blog > Pilih template > kemudian klik edit html simpan code di bawa ini di atas kode   <head> atau  </head>
<style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Simpan CSS di bawah ini tepat di atas  ]]></b:skin> atau  </style>

<style>
<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>
3. Simpan JQuery ini tepat di atas  </body>
<style>
<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>
at 9:55 PM

1. Berikan Komentar Anda Sesuai dengan Judul Artikel.
2. Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.
3. Untuk pertanyaan Out Of Topic ( OOT ) silahkan klik Forum

Konversi KodeEmotionForum

Back to Top