Rabu, 18 Mei 2016

Scroll ke elemen tanpa hash

Selama ini scroll yang kita kenal adalah scroll yang menggunakan Hash atau tanda # dan memanfaatkan ID pada elemen yang dituju, Tapi kali ini saya akan share trik Scrolling tanpa hash menggunakan 4baris script dan memanfaatkan Class sebagai tujuan scroll.

<div class="tujuan">INI ISI TEKS</div>

Javascript scroll

//Seleksi atau pilih kelas
var cls = document.querySelector(".kelas");
//lalu eksekusi
    cls.scrollIntoView(true);

Kode Javascript tunggalnya seperti diatas. Cuma udah aku ubah agar lebih enak digunakan, jadinya seperti dibawah ini

<script type="text/javascript">
//ZTO
function scr(selector){
var cls = document.querySelector(selector);
    cls.scrollIntoView(true);
}
</script>

Penggunaan Scroll tanpa hash

Silahkan anda simpan dulu Javascript multinya diatas </body> dan cara menggunakannya mudah sekali contohnya dibawah ini.

<button onclick="scr('.tujuan')">Klik Akan scroll ke kelas tujuan</button>

Contoh penggunaan scroll tanpa hash, silahkan klik link demonya dibawah ini. Silahkan klik button kelas 1 kelas 2 dan kelas 3. Silahkan ganti kelas .tujuan dengan kelas elemen yang telah anda buat sendiri.

DEMO

Menurut dari sumber yang saya temukan, kode ini bekerja pada IE8+ tapi saya coba ternyata belum bisa, entah saya yg salah atau browser IE8 yang di maksud beda jadi saya belum tau pasti. intinya kalau di Chrome dan di Mozilla insya ALLAH bisa.

Referensi : Page Affairs