Membuat link kembali ke atas atau back to top dengan HTML

Pada Kesempatan kali ini saya akan mencoba membahas mengenai cara membuat tombol kembali ke atas atau istilah bahasa inggrisnya back to top dengan menggunakan HTML biasa.
Sebelumnya saya akan membasa mengenai apa itu link kembali ke atas atau back to top? link ini adalah link yang jika di klik maka halaman akan secara otomatis melakukan Scroll ke bagian atas halaman.



Bentuknya bisa bermacam-macam tergantung selera namun fungsinya tetap sama yaitu memudahkan pengujung untuk melakukan Scroll halaman. sehingga tidak memakan banyak waktu.
Contoh penggunaan Scroll image tersebut misalnya seperti halaman Website ini di bagian bawah sebelah kanan ada sebuah link yang bertuliskan [^ Back to top]. silahkan klik maka secara otomatis halaman akan melakukan Scroll.

Berikut langkah-langkahnya :
1. misalnya saya mempunyai sebuah website yang memiliki struktur HTML seperti di bawah ini : 2. dari contoh diatas saya akan menyisipkan tombol back to top di bagian id="akhir" dengan memasukkan kode HTML di bawah ini. mudah bukan? secara maka ketika link tersebut di klik halaman akan secara otomatis melakukan Scroll ke bagian halaman paling atas tepatnya ke id header. penjelasan dari kode diatas adalah sebagai berikut :
: ini hanyalah kode pembungkus agar mudah dalam melakukan pemberian Style.
Back to top
: berfungsi untuk membuat link sehingga ketika link tersebut di klik maka halaman akan menuju ke id tertentu sesuai dengan nilai dari tag
href="#header"
Mudah bukan. Sekian dulu pembahasan kali ini semoga bermanfaat dan semoga berhasil selamat mencoba terimakasih.

0 komentar :

Posting Komentar

^Back to top