Cara Memperbaiki Fitur Back To Top Yang Tidak Berfungsi Pada Browser Tertentu

Seorang teman pernah menyampaikan bahwa saat membuka blog ini, fitur 'back to top' yang terpasang tidak berfungsi sama sekali. Dimana tidak berfungsi di sini maksudnya yaitu bila back to top diklik seharusnya laman digulung secara otomatis dan kemudian kembali pada bagian paling atas, akan tetapi saat itu disebutkan bahwa ketika back to top diklik tidak terjadi apa-apa alias laman tetap berada pada posisi yang semula.

Kaget juga rasanya karena bila dibuka dengan memakai browser yang terdapat pada komputer saya, yang notabene merupakan browser dengan versi terbaru dan ter-update, fitur back to top yang terpasang di blog ini dapat berfungsi secara normal dan tidak ada masalah sama sekali.

Merasa heran, lebih lanjut kemudian saya menanyakan browser yang dipakai dan ternyata yang bersangkutan memang menggunakan browser yang berbeda. Nah, dari itu timbul kecurigaan terkait dengan fungsionalitas fitur back to top yang terpasang di blog ini sehingga akhirnya uji coba saya lakukan pada berbagai browser populer seperti Internet Explorer, Firefox, Chrome, Safari, dan Opera .

Uji coba pada sebagian browser tersebut (Firefox, Safari, dan Opera) dapat berjalan dengan baik. Artinya fitur back to top dapat berfungsi sebagaimana mestinya. Namun uji coba pada browser yang lain (Internet Explorer, Chrome) tidak dapat berjalan dengan baik karena ternyata fitur back to top memang tidak berfungsi walaupun browser yang dipakai sudah dalam kondisi terbaru dan terbaharui.

Kode HTML untuk tautan back to top yang saya pakai adalah <a href="#atas"></a>. Sedangkan tag atau penanda yang saya pakai untuk bagian atas laman adalah seperti yang tampak pada gambar di bawah ini.

<a id=”atas”></a> tanpa tambahan CSS khusus untuk tag atau penanda tersebut lah yang ternyata menjadi penyebabnya. Menggunakan tag atau penanda seperti itu tanpa dengan menambahkan CSS khusus ternyata mengakibatkan tidak berfungsinya fitur back to top yang terpasang saat laman dibuka dengan memakai browser tertentu. Dimana dalam hal ini CSS khusus yang dimaksud di sini adalah CSS yang berkaitan dengan display. Sehingga untuk mengatasinya dapat ditambahkan CSS #atas{display:block;} ke dalam template, baru kemudian fitur back to top dapat berfungsi sebagaimana mestinya pada berbagai browser yang berbeda.

Namun demikian perlu diingat bahwasanya teknik tersebut hanya dapat diterapkan pada kasus yang serupa. Sedangkan tidak berfungsinya fitur back to top untuk kasus yang berbeda perlu dilakukan penanganan dan solusi yang berbeda pula, karena bisa saja yang menjadi penyebab pun tidak sama. Dalam hal ini sebagai contoh misalnya adalah tidak berfungsinya fitur back to top yang menggunakan tag atau penanda yang berbeda dan atau fitur back to top yang memanfaatkan jQuery.