Chat Box

Friday, 29 March 2013

Membuat Back To Top Tanpa JS/Jquery dan CSS (Simple)

Tinggalkan Komentar

Membuat Back To Top
Dalam tutorial kali ini saya akan membagikan trik yang cukup mudah dalam membuat tombol back to top hanya dengan menggunakan tag HTML .Tapi kembali lagi, apapun yang di kerjakan dengan mudah tidak akan membuat hasil yang mewah :D Tapi cukup membantu kalian para blog walking dalam menata design dalam web kalian agar pembaca/user dapat kembali pada menu navigasi yang rata-rata berada pada bagian atas (Top) .

Enggak usah lama-lama, kalian perhatikan source di bawah ini :

 <a href="#">Back to top</a>

Kenapa hanya tag seperti itu ? bukankah tag seperti itu adalah tag achor yang mempunyai fungsi sebagai hyperlink ? BETUL! karena algoritmanya adalah
1. Ketika user mengklik link "Back to top"
2. Maka browser akan merespon
3. Browser akan memproses tag href (Hyperlink refrence)
4. href="#"
5. Secara otomatis browser akan meload ulang halaman.

Ko bisa? hanya dengan menggunakan tag href="#" kita bisa kembali pada bagian atas ? apakah ini sebuah bugs dalam web browser ? tentu tidak! karena penerapan tag <A> jika di beri href="#" akan otomatis meload halaman kembali. Karena value "#" tidak dikenali oleh browser, Maaksudnya tag "#" adalah perintah untuk "div id" yang tidak terdefinisi . Seharusnya tag div itu jika terdefinisi akan menjadi seperti berikut :

<div id="top"></div>
atau
<body id="top"></div>

Sama saja sebenernya, jika kita ingin menggunakan tag di atas maka, source yang kita gunakan akan menjadi :
<a href="#top">Back to top</a>

Maka otomatis browser akan mengenali dan tertuju pada tag "#top" yang berada pada tag body. Jadi dalam Membuat tombol Back To Top kita tidak direpotkan untuk membuat source embel2 yang terlalu ribet .Cukup dengan :

 <a href="#">Back to top</a>

Kita sudah bisa Membuat Back To Top secara sederhana dan mudah!

*Saling menghargai antar bloger itu baik, sertakan sumber ketika ingin mengcopas artikel saya. Terimakasih



Saling MENGHARGAI antar "Bloger" itu penting, sertakan sumber ketika ingin mengcopas artikel saya. Terimakasih

0 comments:

Post a Comment

Membuat Back To Top Tanpa JS/Jquery dan CSS (Simple)Oops ! | Error 404 To Top Submit ExpressSEO Services & Tools