Cara Membuat Back To Top

Cara Membuat Tombol Back To Top Di Blog-  Sebenarnya cara ini sudah banyak yang menggunakannya. Apa sih fungsi dari tombol back to top itu sendiri, Tombol back to top bisa diartiakan sebagai tombol yang mengulang kembali keatas istilahnya itu bisa kembali keatas tanpa
scroll melalui mouse.

Tombol ini sering digunakan bisa seorang blogger memiliki artikel yang panjang dan memiliki komentar yang banyak. Tombol ini juga memudahkan visitor/pengunjung untuk kembali ke navigasi blog.

Saya memang tidak menggunakan ini sebab saya tidak memiliki artikel yang terlalu panjang sehingga tombol seperti ini menurut saya belum terlalu berguna untuk diterapkan di blog jelek saya ini. Cara membuat tombol back to top ini terinspirasi dari postingan kang ismet. Hehe. Sory ya kang.

Kalau di postingan kang ismet cara membuat tombol back to top dengan efek bounce, saya hanya menggunakan yang sederhana saja. Scriptnya pun saya ambil atau bersumber dari blog kang ismet. (Maaf hanya bisa mengambil contoh saja kang. Tidak copas kang.).

Berikut ini adalah cara membuat tombol back to top
Tapi sebelum saya kasih kodenya, tombol back to top terbagi jadi 2.
yang pertama : Back To Top langsung muncul tanpa di scroll kebawah.
yang kedua    : Back To Top Akan muncul ketika blog di scroll kebawah.

Saya akan membagikan kedua script membuat tombol kembali keatas atau back to top tersebut.

1. Tombol back To Top langsung muncul tanpa di scroll kebawah.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <a style="display:scroll;position:fixed;bottom:5px;right:5px;" href='javascript:void(0);' onclick='jQuery(&apos;html, body&apos;).animate({scrollTop:0}, &apos;slow&apos;);' title="Kembali ke atas"><img src="http://3.bp.blogspot.com/-b1hw2cqey60/TfzE0oLSFkI/AAAAAAAAD3w/FpMh-mdf7rA/s400/Back-to-top.png" /></a>

2. Tombol Back To Top Akan muncul ketika di scroll kebawah.

<style type='text/css' scoped='scoped'> #ScrollToTop{text-align:center; position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png'/></div>

Catatan untuk cara kedua;
Anda juga harus memasukkan kode dibawah ini Tepat diatas </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#ScrollToTop').fadeIn()} else { $('#ScrollToTop').fadeOut();}}); $('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},1000);return false})}); </script>

Hapus kode berwarna Biru jika sudah memiliki .Js Sebelumnya.

Nah itulah cara membuat tombol back to top yang saya ambil dari blog nya kang ismet, saya hanya mengambil kodenya saja. Sumber jelas berada pada blog kang ismet. :)

Semoga bermanfaat.