Modifikasi Tombol Back-to-Top menjadi Auto-Hide

Tabel Konten
  1. HTML 
  2. CSS 
  3. jQuery 
Gambar Tombol Back to Top

Seseorang pernah menanyakan tentang bagaimana cara membuat tombol smooth scroll back to top yang bisa tersembunyi saat halaman belum digulung, dan saat halaman mulai digulung, tombol tersebut akan muncul.

Kita tahu bahwa dasar pembuatan tombol back-to-top adalah dengan cara menganimasikan properti scrollTop menuju 0 seperti ini:

$('#top-nav').click(function() {
    $('html, body').animate({scrollTop:0}, 1000);
    return false;
});

Lihat Demo

Pada dasarnya elemen tombol/navigasi kembali-ke-atas tersebut sudah bisa berfungsi, hanya saja mungkin beberapa dari kalian tidak suka atau merasa terganggu dengan gambar aneh yang selalu melayang-layang di sebelah bawah. Di sini kita akan membuatnya menjadi AutoHide. Sehingga navigasi tersebut hanya akan tampil jika dibutuhkan, sedangkan saat tidak dibutuhkan, maka dia akan bersembunyi (Seperti pahlawan super).

Dengan menggunakan jQuery .scrollTop() kita akan menciptakan kodisi yang kira-kira berbunyi seperti ini:

Jika jarak gulungan layar telah mencapai titik N, tampilkan navigasi kembali-ke-atas, namun jika gulungan layar tidak mencapai pada titik N, sembunyikan navigasi.

if($(window).scrollTop() > 200) {
    $('#top-nav').show();
} else {
    $('#top-nav').hide();
}

Dan agar kondisi tersebut bisa terus diperbaharui seiring berjalannya aktivitas penggulungan viewport, maka kita harus memasukkannya ke dalam event .scroll() seperti ini

$(window).scroll(function() {
    if($(this).scrollTop() > 200) {
        $('#top-nav').show();
    } else {
        $('#top-nav').hide();
    }
});

Proses identifikasi kondisi di atas akan selalu bekerja setiap kali layar digulung. Saat layar sedang digulung, cek apakah jarak gulungan layar sudah mencapai lebih dari 200 atau belum. Jika nilainya sudah melebihi 200, tampilkan navigasi kembali-ke-atas. Namun jika sebaliknya, sembunyikan navigasi kembali-ke-atas:

// Saat layar sedang digulung, cek apakah jarak gulungan layar sudah mencapai lebih dari 200 atau belum.
// Jika nilainya sudah melebihi 200, tampilkan tombol #top-nav
// Namun jika sebaliknya, sembunyikan tombol #top-nav
$(window).scroll(function() {
    if($(this).scrollTop() > 200) {
        $('#top-nav').show();
    } else {
        $('#top-nav').hide();
    }
});

// Sembunyikan penampilan tombol pada saat keadaan masih normal dengan jQuery .hide()
// Saat tombol kembali-ke-atas diklik, animasikan nilai scrollTop menuju 0 dengan durasi selama 1000ms
$('#top-nav').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 1000);
    return false;
});

Untuk mempercantik efek, Anda bisa menggunakan kombinasi efek-efek umum jQuery seperti fadeIn() dan .fadeOut(), .slideDown() dan .slideUp() atau bahkan kalau mau Anda juga bisa menciptakan efek animasi sendiri. Di sini Saya memberikan contoh menggunakan efek .fadeIn() dan .fadeOut():

HTML 

<a href='#' id='top-nav' title='Kembali ke atas!'>
    <img src='back-to-top.png' />
</a>

CSS 

#top-nav {
  position:fixed !important;
  position:absolute; /* IE6 Fallback */
  bottom:10px;
  right:10px;
  z-index:999;
}

jQuery 

$(window).scroll(function() {
    if($(this).scrollTop() > 200) {
        $('#top-nav').fadeIn();
    } else {
        $('#top-nav').fadeOut();
    }
});

$('#top-nav').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 1000);
    return false;
});

Lihat Demo

19 Komentar

  • Unknown

    Pertamaxx

    Aduh ngumet mas, ,
    Tapi aku sudah dipasang smooth back to top.
    Paling mw tak kasih animasi,
    Caranya gmana ya mas, ?

    Efek back topnya blog ini juga bagus mas,
    Warailah mas, :-)

  • Taufik Nurrohman

    @trii waluyo Ra papa mas, efek back-to-top di blog mas itu setahu Saya memakai versi AutoHide scroll-to-top dari DynamicDrive yang mendukung IE6 untuk urusan position:fixed, tapi saat ini sepertinya sudah tidak menjadi masalah lagi. IE6 sudah lewattt!!!
    Dua-duanya tidak terlalu berbeda. Mas tidak perlu melakukan apa-apa. Kalau mau memperlambat efek animasi bisa diatur di dalam settingannya di bagian ini:

    fadeduration:[500, 100]
    • Unknown

      Oh, tapi ora apik ora menurutku loh, daripada langka back to tope.

      Jan, aku naksir banget mg back to tope bloge sampean, dadi amleng-amleng nglogog kan pojok belah kanan, :-D
      Apik yakin, ?

      Emang ditambai apa mas, ?

      Jan, q kepengin, tapi efek yang lainnya loh :-)

      *Oh ya mas, q koment nang posting emoticon, malah nang mas taufik urung dibls,
      Tapi ya ra papa mas, mbok sampean lagi sìbuk*

  • Anonim

    Mas saya dari kemaren coba pasang ini kagak bisa2....? Pasti efeknya ndak ada yang muncul....?

  • Taufik Nurrohman

    @The7Bloggers Jangan lupa untuk memasukkannya ke dalam event .ready():

    $(document).ready(function() {
    ...
    });

    Atau jalan pintasnya cukup tuliskan $(function() { ...

    $(function() {
    $(window).scroll(function() {
    if($(this).scrollTop() > 200) {
    $('a#top').fadeIn();
    } else {
    $('a#top').fadeOut();
    }
    });
    $('a#top').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 1000);
    return false;
    });
    });
  • Anonim

    @Taufik Nurrohman Udah aku masukin mas, tetep hasilnya itu ndak kelihatan? :(

  • Unknown

    Kalo bisa ditambahkan efek bounce aja mas :D

  • Unknown

    klo untuk kebawahnya?

  • Surga Kenari

    thanks mas saya baru tambahkan di blog saya :)

    sdftyujklvbn.blogspot.com/

  • azewdsignet

    mas`kalau tombol top ya kaya mas gmna ?
    soalnya bnyak yg pake kaya MKR, tutplus sama code blogger itu semunya pake top kaya yg DTE..!! saya pngen kaya gtu. hehehe :D

    • Taufik Nurrohman

      Itu cuma animasi bottom dan right saja kok:

      #top-nav {
      position:fixed !important;
      position:absolute;
      bottom:-30px;
      right:-30px;
      z-index:999;
      width:30px;
      height:30px;
      line-height:30px;
      text-align:center;
      background-color:black;
      color:white;
      text-decoration:none;
      }
      $(window).scroll(function() {
      if($(this).scrollTop() > 200) {
      $('#top-nav').stop().animate({bottom:0,right:0}, 200);
      } else {
      $('#top-nav').stop().animate({bottom:-30,right:-30}, 200);
      }
      });
      $('#top-nav').click(function() {
      $('html, body').animate({scrollTop:0}, 1000);
      return false;
      });

      Demo: http://jsfiddle.net/BsAt8/26/

      • Anonim

        mas kalo naro kode yang pertamakan di atas ]]> kalo naro naro kode yg kedua dmnnya ?

  • Forgotten

    mas cara yimpan code jquerynya sebelah mana? saya baru belajar

  • Unknown

    mas boleh minta script tombol yg kaya blog ini ga ? saya suka banget...
    kalo bisa yg versi merahnya biar cocok sama template saya

    http://dammar-asihan.blogspot.com/ makasih mas...

    • azewBz

      bantu menjwb mas..!!
      coba liat komentar di atas pda #azewDsignet di sana sudah tertera cara membuat tombol yg kya DTE

  • Unknown

    Mas mau nanya, sudah putus asa nih coba-coba sendiri tapi gak berhasil,.
    Kalau misalnya seperti punya mas ini gimana, ketika layar di gulung kebawah: margin-bottom:75px
    tapi setelah ke atas sedikit: margin-bottom:0
    kalau misalkan begini, diribah gimana mas?????
    $(function () {
    $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
    $("#top").stop().animate({
    bottom: "50",
    right: "10"
    }, {
    duration: 1000,
    queue: false
    })
    } else {
    $("#top").stop().animate({
    bottom: "-50",
    right: "10"
    }, {
    duration: 1000,
    queue: false
    })
    };
    if ($(this).scrollTop() > 100) {
    $("#bottom").stop().animate({
    top: "-50",
    right: "10"
    }, {
    duration: 1000,
    queue: false
    })
    } else {
    $("#bottom").stop().animate({
    top: "50",
    right: "10"
    }, {
    duration: 1000,
    queue: false
    })
    }
    });

    • Taufik Nurrohman

      75px yang sebelah mananya? -_-

      • Unknown

        Back To Top Punya Samean Mas. :D
        Setelah gulungan layar full ke bawah, repot juga ngejelasinnya. :(

Komentar telah ditutup.