Bicara tentang web design tidak akan ada habis-habisnya, jika mengikuti perkembangan maka banyak sekali yang harus kita pelajari seperti penyesuaian dalam framework. Pada kesempatan kali ini saya akan share cara membuat tombol ScrollTop. Tombol ini berfungsi untuk mengembalikan halaman ke atas, tombol ini sangat berguna untuk
user supaya tidak capek scroll ke atas atau reload halaman untuk kembali ke halaman atas.
Di tutorial ini saya menggunakan framework favorit saya yaitu Materializecss, jika kalian tertarik saya sertakan silahkan install dahulu disini. Alasan saya suka menggunakan framework yang tergolong baru ini karena dokumentasinya lengkap dan easy to use.
Yang perlu kalian lakukan adalah install dulu framework materialize, sertakan jQuery saya menggunakan versi 2.1.1, berikut saya sertakan juga link-linknya.
<!–Import Google Icon Font–>
<link href=”//www.balidev.top/cloudme.fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>
<!–Let browser know website is optimized for mobile–>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>
<!– Compiled and minified CSS
–>
<!–Import jQuery before materialize.js–>
<script type=”text/javascript” src=”//code.jquery.com/jquery-2.1.1.min.js”></script>
<link rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css”>
<script src=”//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js”></script>
Warna default dari floating button-nya adalah hijau (teal) untuk merubah warna tersebut kita memerlukan css tambahan untuk meng-override css bawaan framework.
.btnColor{ background-color: #2c3e50; } .btnColor:hover{ background-color: rgb(0,0,0); } .hideBtn{ display: none; }Langkah selanjutnya kita buat floating buttonya, secara default posisinya sudah diatur di pojok bawah, jika kalian ingin meng-custom silahkan kreasikan sendiri dengan membuat css baru.
<!--Button Fixed to Scroll Top--> <div class="fixed-action-btn hideBtn"> <a class="btn-floating btn-large btnColor" id="btnColor"> <i class="large material-icons">keyboard_arrow_up</i> </a> </div> Langkah terakhir kita buatkan script agar tombol berfungsi, disini saya juga menambahkan autohide dimana tombol tidak akan terlihat saat berada diposisi paling atas. <!--Script untuk button to Top --> <script type="text/javascript"> $(document).ready(function(){ //Check to see if the window is top if not then display button $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('.hideBtn').fadeIn(200, function(){ $(this).css('display', 'block'); }); } else { $('.hideBtn').fadeOut(); } }); //Click event to scroll to top $('.btnColor').click(function(){ $('html, body').animate({scrollTop : 0},800); return false; }); }); </script>Oke sekian tutorialnya, saya rasa tombol ini sengat berguna selain untuk mempercantik web design kita tombol ini juga memudahkan user untuk navigasi. Semoga bermanfaat dan terima kasih sudah berkunjung. Jika ada masalah silahkan tambahkan di kolom komentar.
Bagaimana membuat event pada javascript ketika mendeteksi scroll sudah mentok kebawah. contohnya kyk facebook pas udah di scroll mentok kebawah otomatis ngeload konten baru. JAVASCRIPT ilustrasinya seperti ini
if (scroll udah mentok ke bawah) { lakukan sesuatu }intinya itu gmn caranya ngedeteksi kalo kondisinya itu terpenuhi trus langsung ke trigger eventnya.
@wandifrog
274 Kontribusi 56 Poin
Dipost: 5 tahun yang lalu Update 2 tahun yang lalu
Jawaban Terpilih
dah nemu
document.addEventListener('scroll', function (event) { if (document.body.scrollHeight == document.body.scrollTop + window.innerHeight) { alert("Bottom!"); } });@wandifrog
274 Kontribusi 56 Poin
Dipost: 5 tahun yang lalu Update 5 tahun yang lalu
Jawaban
window.onscroll = function() {scrollFunction()}; function scrollFunction() { var scroll = document.body.scrollTop; if (scroll > 600) { //aksi } }
@dodipsitorus
412 Kontribusi 145 Poin
Dipost: 5 tahun yang lalu Update 5 tahun yang lalu
- ka Dodi Sitorus itu koding buat apa kak - @Teddy13
Ini referensi nya gan.. //www.w3schools.com/jsref/event_onscroll.asp
@dodipsitorus
412 Kontribusi 145 Poin
Dipost: 5 tahun yang lalu Update 5 tahun yang lalu
$(window).scroll(function() { if($(window).scrollTop() + $(window).height() == $(document).height()) { alert("bottom!"); } });
@ikhsanfadillah
11 Kontribusi 4 Poin
Dipost: 5 tahun yang lalu Update 5 tahun yang lalu
Gan dodi sitorus. Itu maksudnya 600 = 600 pixel kan. Gmn kalo pake vh atau g persen. Ada gk event yg deteksi langsung kalo scroll udah mentok
@wandifrog
274 Kontribusi 56 Poin
Dipost: 5 tahun yang lalu
Biasanya height itu dalam pixel, witdh itu dalam persen guna untuk responsive untuk mobile phone.. Silahkan dimodifikasi gan didalam aksi kalau mau diubah ke persen, caranya.. silahkan baca dokumentasinya, jquery.. biar lebih paham gan.. itu tergantung kebutuhan agan Atauu nggak tentuin terlebih dahulu height element atau body.. nahh setelah ituu aksi dalam fungsi scroll berjalan sesuai dengan height element atau body tadi.. kira2 begitu, saya pikir ini sudah menjawab gimana mendeteksi jika sudah mentok ke bawah..
@dodipsitorus
412 Kontribusi 145 Poin
Dipost: 5 tahun yang lalu Update 5 tahun yang lalu
dah nemu
@wandifrog
274 Kontribusi 56 Poin
Dipost: 5 tahun yang lalu Update 5 tahun yang lalu
Iyaa dengan cara seprti itu juga bisaa, cuma yang itu digabungin.. Tapi tetap itu pixel hehehe.. Lanjut..
ka ini scroll page otomatis atau masih harus di clik ka ?
@Teddy13
13 Kontribusi 0 Poin
Dipost: 2 tahun yang lalu
Login untuk gabung berdiskusi