Cross Browser Scroll to Top Animation (JavaScript)

Tabel Konten
  1. Penggunaan 
/*! http://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation */
function scrollTo(element, to, duration) {

    // http://robertpenner.com/easing/
    // t = current time, b = start value, c = change in value, d = duration
    Math.easeInOutQuad = function(t, b, c, d) {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
    };

    var start = element.scrollTop,
        change = to - start,
        currentTime = 0,
        increment = 20,
        animateScroll = function() {
            currentTime += increment;
            var val = Math.easeInOutQuad(currentTime, start, change, duration);
            element.scrollTop = val;
            if (currentTime < duration) {
                setTimeout(animateScroll, increment);
            }
        };

    animateScroll();

}

Penggunaan 

element digunakan untuk mewakili elemen yang ingin diberi efek animasi, to mewakili jarak arah gulungan ke atas, duration mewakili durasi animasi:

<button onclick="scrollTo(document.body, 0, 1000);">Scroll to Top</button>

Lihat Demo

19 Komentar

  • IRIL SAGITA

    Kak, di halaman demonya kok gak berfungsi ya ?

    • Taufik Nurrohman

      Tidak bekerja di Firefox (dan yang lain selain Chrome?) kalau hanya menggunakan document.body. Mungkin masalah selektor :\ Saya coba animasikan elemen document.body dan document.documentElement secara bersamaan bisa bekerja:

      <button id="go-top">Go to Top</button>
      <script>
      //<![CDATA[
      function scrollTo(element, to, duration) { ... }
      document.getElementById('go-top').onclick = function() {
      scrollTo(document.documentElement, 0, 1000); // `<html>`
      scrollTo(document.body, 0, 1000); // `<body>`
      };
      //]]>
      </script>

      Sebenarnya kasusnya sama seperti animasi scroll dengan JQuery. Selektor HTML dan BODY harus digabungkan:

      $('button').on("click", function() {
      $('html, body').animate({scrollTop:0}, 1000, "easeInOutQuad");
      });

      Cek lagi halaman demonya!

      • IRIL SAGITA

        Ok terima kasih, sudah bekerja ni kak.

      • IRIL SAGITA

        Masih masalah scroll ni kak, di blog aku jika di geser (scroll) tu terasa berat pergeserannya itu karena apa ya kak, padahal untuk loadingnya ya masih lumayan cepet ?

        blog aku ini :
        www.sagitasoft.com

        • Unknown

          kebanyakan CSS box shadow... :D

          • IRIL SAGITA

            Setalah aku terapkan tidak memakai box-shadow tetep berat gerakannya.

            munkin temen yang lain punya solusi ?

        • Taufik Nurrohman

          Waktu efek animasi menggulung terjadi, bagian penghitung jarak ini ikut-ikutan sibuk. Jadi komputernya agak kebingungan:

          • IRIL SAGITA

            Wah itu benar kak, setelah aku hapus scroll bar-nya jadi tlunyur-tlunyur tanpa hambatan lagi, dan menurut aku terlalu banyak variasi blog itu juga kurang efisien ya !

            Terima kasih banyak bantuannya !

  • Unknown

    Mantap.

  • Suparyono

    TRIMS MAS..

  • alansinggih

    Mas cara buat kotak melayang ketika di scroll yang seperti di blog :
    http://www.sagitasoft.com/2013/06/performancetest-80-full-keygen.html
    di bagian POST TERBARU itu bagaimana..? 7:( soalnya saya tidak tau namanya...

  • Yuli Akbar

    kak, postingin donk daftar isi versi dte

  • Masiki

    Cara makenya gimana ya mas? agak bingung nih. Mohon bantuannya :D

    • Taufik Nurrohman

      Masukkan tombol ke dalam widget HTML/JavaScript, lalu masukkan skrip ke dalam tag <script>, lalu letakkan di bawah tombol tersebut.

  • Irfan Muhammad Ghani

    bang kalau mau scroll ke bagian <div> dengan id tertentu gmn ya ?

    • Taufik Nurrohman

      // gulung ke `#stage-1`
      tombol.onclick = function() {
      var top = document.getElementById('stage-1');
      if (!top) return;
      top = top.offsetTop;
      scrollTo(document.documentElement, top, 1000);
      scrollTo(document.body, top, 1000);
      };

      Demo: http://jsfiddle.net/tovic/AXM6F/15

  • you

    Kalo untuk menambahkan auto hide gimana ya mas. ?

    • Anonim

      Sudah bisa di atasi mas cuma perlu ada yang ditambahin saja..

Komentar telah ditutup.