Membuat Tombol GoTop Menggunakan jQuery

Tombol goTop atau GoTo Top atau secara istilahnya adalah tombol navigasi untuk kembali ke halaman paling atas (top=atas) adalah suatu hal yang dapat memudahkan pengguna untuk kembali ke posisi halaman paling atas.

Membuat tombol goTop menggunakan jQuery ini memiliki hasil dan efek yang lembut dan halus, karena jQuery menyediakan efek-efek yang lebih menawan dan terlihat sangat halus. Untuk membuatnya simak tutorial dibawah ini.

Sebelumnya, untuk menggunakan jQuery kita perlu menginstallnya terlebih dahulu. Cukup letakkan kode berikut kedalam tag <head> blog anda. Jika sudah ada, maka dapat melewatkan langkah ini.

Kode :
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
Langkah-langkahnya :
  1. Letakkan script berikut kedalam tag <head> blog anda
    2. <script type="text/javascript">
function gotoTop() {
$("html, body").animate({scrollTop:0},"slow");
}
</script>

    Script diatas berfungsi untuk menggeser layar ke sudut paling atas halaman yaitu dengan nilai 0. Untuk nilai anda bisa mengubah dengan yang lebih tinggi sesuai selera masing-masing.

  2. Lalu buatlah sebuah tombol untuk melakukan navigasi
    3. <input onclick="gotoTop()" type="button" value="Go Top" />
  3. Selesai.

Demo atau contohnya dapat anda lihat dibawah ini. Untuk tombol dapat anda modifikasi sesuka hati anda.

Baca Juga :

Older Post
Newer Post