CARA MEMBUAT TOMBOL NAIK DENGAN HTML, CSS DAN JAVASCRIPT

 ABANGJEFF TUTORIAL | Saya yakin bahwa lebih dari sekali Anda memasuki sebuah situs, Anda telah menggulir (ke bawah halaman) dan Anda telah menggunakan salah satu panah ini yang membawa Anda ke bagian atas situs, hari ini dalam tutorial ini saya akan mengajari Anda cara membuat salah satu tombol ini yang akan memungkinkan Anda untuk meningkatkan pengalaman situs web Anda, terutama jika Anda memiliki blog atau halaman yang berisi banyak konten dan pengguna harus terus-menerus naik dan turun halaman.

Untuk membuat tombol ini, kita akan menggunakan HTML untuk strukturnya, CSS untuk membentuk tombol dan terakhir Javascript dengan library Jquery-nya. Membuat tombol ini sangat sederhana dan tidak memerlukan banyak kode, dalam kasus kami, kami akan membuat tombol tersembunyi yang hanya muncul ketika pengguna menggulir mouse, atau bilah navigasi jendela, jadi tombol tidak Ini akan ditampilkan ketika kita memuat halaman dan kita berada di atasnya.

Satu hal yang ingin saya sampaikan kepada Anda adalah bahwa memungkinkan untuk membuat tombol ke atas tanpa Jquery, tetapi kita akan menggunakan Jquery untuk memberinya animasi sehingga perubahan pada halaman tidak terlihat secara tiba-tiba.

Demo: http://falconmasters.com/demos/ir_arriba/

Sumber daya untuk digunakan:

Jquery: http://code.jquery.com/jquery-latest.js

Icomoon: http://icomoon.io/

Kami akan mulai memberikan struktur pada tombol kami, kami dapat melakukannya dengan hampir semua elemen, dari a <div>, elemen<a> , dll. Dalam hal ini saya akan melakukannya dengan cara <span>, tentu Anda ingin menggunakan elemen <a>karena itu adalah hal yang paling logis bagi pengguna untuk mengidentifikasi bahwa itu adalah elemen yang dapat diklik, tetapi jangan khawatir tentang itu, karena dengan CSS kami akan memberikannya aspek yang dapat diklik dan dengan Maksud saya untuk mengganti mouse, jadi sepertinya kita akan mengklik link.

Terlepas dari elemen yang telah kita putuskan untuk digunakan, kita akan menambahkan 2 kelas padanya , 1 dari kelas ini adalah salah satu yang akan kita kerjakan dengan css, dalam hal ini saya telah memanggilnya .ir-arribadan kelas lainnya adalah yang akan kita gunakan untuk menambahkan ikon. Jika Anda masih belum tahu cara menambahkan ikon melalui sumber dan kelas, berikut adalah tutorial di mana saya mengajarkan cara menggunakan ikon, seperti yang akan kita gunakan dalam tutorial ini.

Struktur HTML:

<span class="ir-arriba icon-arrow-up2"></span>

 

<!--Agregamos contenido para que aparezca la barra vertical del navegador-->

<section class="contenido">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>

Dalam struktur HTML sebelumnya, saya menunjukkan kepada Anda elemen <span>yaitu tombol yang akan kita gunakan untuk mengklik dan naik pada halaman, tetapi seperti yang akan Anda lihat, saya juga menambahkan bagian dengan kelas yang disebut konten. Anda tidak menambahkan kode ini, cukup tambahkan untuk memiliki beberapa konten pada halaman dan bilah navigasi vertikal dari browser dapat muncul.

Sekarang kita akan memberikan gaya CSS tombol, Anda memiliki gaya di bawah ini, tetapi singkatnya apa yang harus kita lakukan mengubah kursor ke pointer (mensimulasikan tautan yang dapat diklik), beri ukuran dan posisikan di bagian kanan bawah jendela, ini Kami melakukannya dengan properti posisi dan nilai tetapnya.

Kode CSS:

.ir-arriba {

display:none;

padding:20px;

background:#024959;

font-size:20px;

color:#fff;

cursor:pointer;

position: fixed;

bottom:20px;

right:20px;

}

 

Dan akhirnya kami memiliki kode JavaScript di mana kami pada dasarnya memberi tahu Anda bahwa ketika Anda mengklik tombol itu akan mengirim kami ke bagian atas halaman , dan kami juga memberi tahu Anda bahwa jika kami berada di atas, tombol tidak akan ditampilkan, hanya jika kami turun ke halaman Dengan cara ini kami tidak akan mengganggu pengguna dengan elemen yang tidak diperlukan saat memuat halaman. Kami menggunakan jquery karena lebih mudah untuk melakukan, selain itu tombol tidak akan muncul dan hilang seketika, tetapi akan memiliki animasi seperti yang Anda lihat di demo.

Catatan: Jangan lupa untuk mengimpor jquery ke dalam file .html Anda atau kode javascript tidak akan berfungsi.

Kode Javascript:

$(document).ready(function(){
 
$('.ir-arriba').click(function(){
$('body, html').animate({
scrollTop: '0px'
}, 300);
});
 
$(window).scroll(function(){
if( $(this).scrollTop() > 0 ){
$('.ir-arriba').slideDown(300);
} else {
$('.ir-arriba').slideUp(300);
}
});
 
});

Sekian tutorial dari kami semoga membantu kalian dalam mengembang website kalian :)