Tombol scroll to top ini dimaksudkan sebagai pintasan dari bawah naik ke atas,apabila halaman terlalu tinggi saat discroll kebawah dan kita ingin kembali keatas,hanya tinggal mengklik tombol scroll to top tersebut,maka dengan otomatis halaman akan kembali keatas.
Tertarik membuatnya silahkan ikuti langkah-langkah berikut ini :
Pertama-tama simpan kode HTML dibawah ini didalam <body>:
Apabila anda sudah selesai menyimpan kode html di atas, maka selanjutnya ketikkan kode jQuery ini tepat dibawah kode diatas
<script src="http://code.jquery.com/jquery-1.10.2.js"type="text/javascript"></script>
<script type="text/javascript">var toper = $('a#top');
$(window).scroll(function(){
if ($(this).scrollTop() > 100 {
toper.fadeln(200);
} else {
toper.fadeOut(200);
}
});
toper.click(function(){
$('html,body').animate({scrollTop:0}, 500);
return false;
});
</script>
<script type="text/javascript">
var s = skrollr.init();
</script>
Terakhir adalah memberi style pada button 'Scroll to Top' agar buttonnya tetap berada di bagian bawah pada halaman web anda dengan menggunakan kode css dibawah ini.Simpan dengan format .css
Ta#top{position:fixed;
display:none;
bottom:30px;
right:30px;
z-index:9;
color:rgba(255,165,0,0.8);
font-size:4em;
font-weight:300;
border:4px solid rgba(255,165,0,0.8)}
Setelah disimpan masukkan file css tadi ke dalam file html diatas dan tempatkan di <head> dengan menggunakan <link rel="stylesheet" type="text/css" href= "nama file css"
Setelah disimpan masukkan file css tadi ke dalam file html diatas dan tempatkan di <head> dengan menggunakan <link rel="stylesheet" type="text/css" href= "nama file css"
Jika anda belum punya gambar tombolnya,anda bisa mengkopi url yang ada dibawah gambar dibawah ini :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2FfdIgwJGqNuk7uyg8hgIYjhGieYYY84M1knZROQNx8bYVnmWwPh71seCktbz6YzJmj-tS5ZzsZjbCN6qWxBco7nMrerQ3YBfUAqx6VwcvuTMTC4r5SfkUhXBS5MDrytWjGW7k1nsnlQv/s1600/back+to+top14.png
Untuk penempatan url gambar bisa diletakkan di
<a id="top" href='#'><img src="masukkan url gambar"/></a>
0 komentar:
Posting Komentar