Cara Membuat Smooth Back to Top dengan jQuery di Blog

Smooth Back to Top dengan Jquery. itulah yang akan saya share pada kesempatan kali ini, fungsi dari tombol back to top ini adalah sebagai pintasan dari bawah naik keatas, apabila halaman terlalu tinggi saat discroll kebawah dan kita ingin kembali keatas, kita hanya tinggal mengklik tombol back to top tersebut maka dengan otomatis halaman akan kembali keatas. Sebetulnya tutorial kali ini banyak yang sudah memposkan, saya juga dapat kode-kode aneh ini dari teman saya MDF Blog, dan saya hanya memodifikasinya sedikit tadinya berbentuk seperempat bulat, dan saya modifikasi sedikit dan bentuknya menjadi atas kanan dan kiri menjadi agak bulat sedikit, dan kebawahnya lurus, demonya bisa dilihat diblog ini dipojok kanan bawah.

Untuk memasang tombol Back to Top Smooth dengan Jquery ikuti langkah-langkah berikut:
1. Login akun Blogger anda.
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

/* Smooth Back to Top dengan jQuery */
#backtop { cursor:pointer; position:fixed !important; position:absolute; left:96%; bottom:-70px; z-index:999; background-color:#ff0000; border:1px solid #333; -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; width:30px; height:45px; overflow:hidden; text-indent:-999px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; border-top-left-radius:5px; border-top-right-radius:5px }
#backtop::after { content:" " ; position:absolute; top:3px; left:8px; width:0; height:0; border-width:12px 7px; border-style:solid; border-color:transparent transparent #f7f7f7 transparent }

4. Kemudian letakkan kode berikut ini diatas kode </body>

<!-- Smooth Back to Top dengan jQuery -->
<div id='backtop'>Back to Top</div>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-54",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});
//]]>
</script>

5. Simpan Template
Silahkan anda sesuaikan sendiri dan edit-edit. Semoga Bermanfaat.

Source : MDF Blog

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Blog Krizeer. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Blog Krizeer dengan mengklik tombol di bawah ini:

Artikel Keren Lainnya:

Ditulis oleh Unknown pada tanggal Selasa, 13 Agustus 2013