Cara menggunakan SCROLLTOP pada JavaScript

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=”https://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=”https://code.jquery.com/jquery-2.1.1.min.js”></script>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css”>
<script src=”https://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.. https://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

 
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

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