Pembahasan bagian pertama kita sudah membuat sticky menu dengan menggunakan jquery. Nah untuk artikel tentang Cara Membuat Website Satu Halaman Menggunakan Scroll Jquery Part2 yang akan kita bahas yaitu membuat fungsi scroll otomatis yang akan dijalankan ketika kita melakukan klik pada menu, dimana studi kasus ini biasa disebut dengan one page-scroll.
Untuk menyelesaikan Cara Membuat Website Satu Halaman Menggunakan Scroll Jquery Part2 kita langsung saja membuat function seperti script berikut ini.
|
1 2 3 4 5 |
$(".nav a, .menu a").click(function(){ var pos = $(this).attr("class"); posi = $("#"+pos).offset().top; $("body, html").animate({scrollTop:posi-40}, 800) }) |
Teman-teman bisa perhatikan script jquery di atas. Dimana ketika saya melakukan klik pada tag a yang ada di div class nav dan di div class menu maka saya mengambil nilai atau value attribute class yang saya klik dan saya simpan di dalam variable pos. dimana variable pos ini saya gunakan untuk menghitung tinggi yang akan saya pakai saat menjalankan scroll dengan fungsi offset dan top. Kemudian saya buat body dan html melakukan scroll dengan menggunakan fungsi animate yang didalamnya ada variable scrollTop untuk menjalankan scroll dengan variable posi yang dikurangi 30. Dimana 30 ini di ambil dari jumlah padding atas di artikel 20px dan padding atas di home, menu atau contact sebesar 10px pada css yang saya buat sebelumnya Dengan durasi 800 milisecond.
Teman-teman bisa lihat demonya di alamat link ini https://codepen.io/anon/pen/rqmbJw .
Demikian artikel tentang Cara Membuat Website Satu Halaman Menggunakan Scroll Jquery Part2. Untuk pembuatan website satu halaman ini dapat membantu kalian ketika kalian membuat website yang sederhana sejenis company profile atau wedding website atau website yang simple simple saja. Dimana tidak perlu melakukan reload ketika ingin ke menu lain. Karena dengan website satu halaman atau one page ini hanya dengan melakukan scroll kita bisa pidah dari menu satu ke menu lain.
Oke Sampai disini pembahasan kita tenang website satu halaman atau biasa di kenal dengan one page – scroll, semoga dapat bermanfaat dan selamat mencoba.