Membuat auto scroll di html
|
ada yg tau bagaimana cara membuat scroll otomatis ke bawah untuk fiturchat menggunakan jquery? Contoh
$(document).on('click', '.start_chat', function(){
var to_user_id = $(this).data('touserid');
var to_user_name = $(this).data('tousername');
make_chat_dialog_box(to_user_id, to_user_name);
$("#user_dialog_"+to_user_id).dialog({
autoOpen:false,
width:400
});
$('#user_dialog_'+to_user_id).dialog('open');
});
function make_chat_dialog_box(to_user_id, to_user_name){
var modal_content = ' Button Scroll disini berfungsi untuk membantu pengguna website saat melakukan scroll ke halaman atas atau scroll ke halaman bawah. Dengan adanya sebuah button scroll tentu akan sangat membantu supaya tidak perlu lagi scroll keatas atau scroll kebawah lagi. Dalam kesempatan kali ini saya akan membuat button scroll keatas dengan HTML CSS. Bagaimana cara membuatnya mari simak langkah-langkah berikut ini:Langkah pertama buat terlebih dahulu file HTML seperti code dibawah: 1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Membuat Scroll Top Dengan HTML CSS</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> <link rel="stylesheet" href="style.css"> </head> <body> <section></section> <a href="#" class="up-icon"><i class="fas fa-chevron-circle-up"></i></a> </body> </html> Dalam membuat button scroll keatas saya memakai icon dari fontawesome bisa dilihat. Langkah selanjutnya tambahkan CSS untuk mengatur tampilan htmlnya simak code berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 html{scroll-behavior: smooth;} body{margin:0; pading:0;} section{ width: 100%; height: 300vh; background: url(padar-island.jpg) no-repeat; background-size: cover; } .up-icon{ position: fixed; width: 50px; height: 50px; border-radius: 50%; background: rgba(192,192,192,0.3); bottom: 40px; right: 50px; text-decoration: none; text-align: center; line-height: 50px; color:#ffffff; } .fa-chevron-circle-up{font-size: 30px;line-height: 50px;color:#01daec;} pada CSS saya menyisipkan sebuah untuk digunakan sebagai background. nah tampilan gambar yang saya pakai seperti berikut: Jika sahabat sudah selesai mengetikkan code style CSS coba jalankan pada browser apakah sudah seperti tampilan yang saya buat: Pada gambar diatas button icon fas fa-chevron-circle-up atau seperti panah ke atas dibuat posisi fixed jadi saat di scroll ke atas maupun kebawah tidak bergeser. Nah silahkan sahabat scroll halaman samapai bawah lalu klik icon panah tersebut jika benar maka akan menuju ke atas. Sekian pembahasan artikel kali ini tentang Membuat scroll keatas menggunakan HTML CSS, semoga bermanfaat dan sampai jumpa dilain kesempatan serta dengan pembahasan lainnya. |
