Smooth Back to Top dengan jQuery
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. 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 berikut ini dibawah kode ]]></b:skin>
Silahkan anda sesuaikan sendiri.. Semoga Bermanfaat
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 berikut ini dibawah kode ]]></b:skin>
<style>4. Kemudian letakkan kode berikut ini diatas kode </body>
#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#7F007B;border:2px 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:45px;height:45px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;}
#backtop::after{content:"";position:absolute;top:-4px;left:15px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;}
</style>
<div id='backtop'>Back to Top</div>5. Simpan Template
<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:"-50",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});
//]]>
</script>
Silahkan anda sesuaikan sendiri.. Semoga Bermanfaat
Posting Komentar
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>
Link aktif akan dimatikan secara otomatis.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.