بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم
Tutorial kali ini saya akan membahas tentang Membuat Tombol Kembali Ke Atas atau Back To Top dengan menggunakan Jquery. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu lansung saja menuju ke TKP
demo
- Log In ke akun blogger dulu
- Masuk Rancangan, kemudian edit HTML
- Centang Expand Template Widget
- Tekan CTRL+F dan ketik
- Copy kode dibawah ini
- Paste kode tadi di atas
- Cari kode ini
- Cari kode ini
- Kemudian copy kode di bawah ini
- Letakkan di atas kode
- Simpan template
</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- jika di template anda sudah terdapat script jQuery 1.3.2, maka anda tidak perlu lagi menambahkan kode ini -->
<script type='text/javascript'>
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
</script>
</head>
<body>dan replace / ganti dengan ini
<body id='top'>
</body>
<div id='gotop'> <a href='#top' title='Go to Top'> <img src='http://i766.photobucket.com/albums/xx310/Ikhfar/arrow3-blue-64.png' style='right:20px;bottom:20px;position:fixed'/> </a> </div>
</body>
ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ
0 komentar:
Posting Komentar
Jangan Lupa komentar apabila terdapat penulisan kata, kalimat atau yang lainnya. Terima kasih telah berkunjung ke sini.