Cara membuat tombol Scroll Go To Top / Back To Top dengan animasi JQuery

Advertisement

Advertisement

 

    Banyak sekali dikalangan blogger dunia bahkan developer web dan para programmer di tingkat web membuat link go to top, Mengapa mereka memasang sebuah elemen tersebut ?. Mungkin di kalangan para orang awam seperti saya pastinya belum mengetahui, Apa fungsi dari elemen tersebut ?. Tetapi untuk seseorang yang lebih tahu, pastinya ingin mencoba dan menerapkanya pada blog / websitenya ? .

Fungsi memasang link Go to top

- Hal pertama adalah dari segi kecepatan scroll, contohnya saja adalah jika anda berada di elemen paling bawah sendiri, tentunya footer, yang tentunya memang anda sengaja ingin melihat tampilan / update / tampilan navigasi / sidebar website yang anda kunjungi . Tentunya jika anda tidak memasang link go to top ini pastinya anda akan menggunakan fungsi scroll mouse dan tentunya bisa saja menimbulkan kerusakan pada scroll mouse tersebut .

- Biasanya, kita menggunakan script (#) di dalam link href untuk mengembalikanya langsung ke bagian elemen paling atas sendiri. Tentunya efeknya tidak menonjol dan hanya akan menambahkan efek sekejap saja, jika anda ingin menambahkan efek scroll ke atas secara smooth gunakanlah efek Go To Top ini  .

Ada 2 versi :

1. Link biasa, ditambahi class dan Id= tanpa style css .
-  Dalam artian, hanya link biasa tetapi hanya di tambahi sebuah Class dan Id .

Contoh :

<a class="toTop" href="#"># pergi ke atas</a>

2. Sebuah elemen link yang di tambahi stylesheet css ( biasanya di tambahkan pada pojok kanan -> bawah pada halaman website / blog ) .

Cara menggunakan :

Kode lengkapnya :

Style CSS

#to-top{ display:none; width:30px; height:30px; position:fixed; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBV_FH1s889Ze758bLQ5aSIS9nPtmA8JWWIJvopxLDcz3h67mPi8EEomWdXxn2vRY3NxSqFX0yOrjWlPUBroWv1eGKRQfeLCJEC6uQI5qBjYzT1HodtZY8Vl2SJ31WOZ5Rpro2wQ690yc/s1600/arrow-up_basic_blue.png) no-repeat; right:40px; bottom:40px; }

- Untuk stylenya bisa anda ubah sesuai selera anda .

Elemen HTML

<a href="#" id="to-top"></a>

- Taruh di atas elemen </body> .


Script JQuery

Baca : Mengirim parameter form seperti url dengan jquery

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/> $(function(){ $(window).scroll(function(){ if($(this).scrollTop() > 200){ $("#to-top").fadeIn(); } else{ $("#to-top").fadeOut(); } }); $("#to-top").click(function(){ $("html,body").animate({scrollTop:0},600); // melakukan efek scroll dengan kecepatan 0.6 detik }); });

- Ketika nilai scroll lebih dari 200, tombol dimunculkan dengan efek fadeIn() dan sebaliknya, jika kurang dari 200, maka elemen akan di sembunyikan dengan efek fadeOut() .

- Pada return:false; -> agar pada saat di klik tidak meloncat pada value href .

Untuk preview tanpa style css, bisa anda lihat elemen html berikut :

# back to top

Silahkan anda kreasikan dengan script jquery atau style css dengan imajinasi anda .

Dan juga, silahkan anda koreksi kembali script maupun kata - kata dalam postingan ini , namanya juga manusia, pastinya mempunyai kesalahan baik dari segi perkataan dan perbuatan .

Advertisement

Advertisement