Mecha versi 2.6.4 sudah dirilis!

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 !

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.