Membuat Fungsi Back To Top

Hallo.

Selamat datang di situs GRAD Information, pada kesempatan kali ini saya akan memberikan cara membuat fungsi tombol back to top dengan jquery kawan.

Singkat materi, fungsi back to top ini adalah fitur yang dapat membantu pembaca agar dapat melakukan scroll ke atas dengan cepat. 

Fitur ini berguna sekali bagi kalian yang terbiasa membuat artikel yang lumayan panjang, karena hal ini dapat memudahkan pembaca saat ingin kembali pada paragraf pertama artikel kalian J.

 

Ok, daripada kelamaan mending simak langkah-langkahnya sebagai berikut:

1. Masuk ke akun blogger kalian.

2. Pilih menu 'tema' dan klik tanda '▼' lalu pilih 'edit html' 

3. Pastikan sudah terdapat 'cdn jquery' dalam template kalian.  

4. Jika tidak ada, tempel saja kode berikut tepat diatas tag '</head>'

<!-- ini adalah contoh library jquery --> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'> </script> <!-- dan letakkan di atas tag </head> ya woke --> <!-- jika sudah ada jquery, skip aja kode ini -->

5. Oh iya, jangan lupa salin kode 'javascript' berikut: 

<!-- back to rop jquery --> <div class='back-to-top' style='z-index:2000000000;'><a class='hitam' href='#' id='back-to-top' title='back to top'><!--i class='fa fa-chevron-up'/--> <svg height='24px' style='fill:white;' viewBox='0 0 24 24' width='24px'><polyline class='st0' points='24,23 0,23 12,5 '/></svg></a></div> <script async="async"> $(window).scroll(function() {if($(this).scrollTop() > 200) { $('#back-to-top').fadeIn();} else { $('#back-to-top').fadeOut();}}); $('#back-to-top').hide().click(function() { $('html, body').animate({scrollTop:0}, 1000);return false;});</script> <!-- tempel dibawah code jquery atau </body> -->

6. Lalu letakkan di atas tag '</body>' atau dibawah tag 'jquery' tadi.

7. Ok, kita telah menyelesaikan javascriptnya. Dan sekarang mulai stylenya.

8. Kemudian agar stylenya bagus, kalian salin kode 'css' berikut:

/*ini kode cssnya ya*/ #back-to-top{color:#ffffff; font-size:24px} .back-to-top{position:fixed!important; position:absolute; bottom:20px; right:20px;z-index:999} .hitam{ background:#2C3E50!important; padding:15px 10px 10px 10px!important;}

9. Lalu letakkan kode css diatas tag '</style>' atau '</b:skin>'

10. Dan selesai.

Untuk 'demo' kalian bisa melihat tombol panah keatas yang berada di pojok kanan bawah artikel. Apabila kalian masih bingung, kalian bisa memberikan komentar dibawah ini J. 

Ok, itu adalah akhir cerita saya pada hari ini J. Dan sebelum kalian meninggalkan artikel ini, saya ingin kalian untuk 'follow' akun sosial media saya serta jangan lupa klik 'like', 'subscribe' dan 'share' kawan.

Sekian dari saya dan terima kasih J.

---

Share :Wa FbTwLkTgTmPr Ln

Related Post: