Saturday, June 1, 2013

Cross Browser Scroll to Top Animation (JavaScript)

/*! 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

Labels: , ,

19 Comments:

At Saturday, June 1, 2013 at 10:28:00 PM GMT+7, Blogger IRIL SAGITA said...

Kak, di halaman demonya kok gak berfungsi ya ?

 
At Saturday, June 1, 2013 at 11:01:00 PM GMT+7, Blogger Taufik Nurrohman said...

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!

 
At Sunday, June 2, 2013 at 6:52:00 AM GMT+7, Blogger IRIL SAGITA said...

Ok terima kasih, sudah bekerja ni kak.

 
At Sunday, June 2, 2013 at 7:23:00 AM GMT+7, Blogger IRIL SAGITA said...

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

 
At Sunday, June 2, 2013 at 8:48:00 AM GMT+7, Blogger Unknown said...

kebanyakan CSS box shadow... :D

 
At Sunday, June 2, 2013 at 10:35:00 AM GMT+7, Blogger Unknown said...

Mantap.

 
At Sunday, June 2, 2013 at 3:46:00 PM GMT+7, Blogger IRIL SAGITA said...

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

munkin temen yang lain punya solusi ?

 
At Sunday, June 2, 2013 at 7:32:00 PM GMT+7, Blogger Taufik Nurrohman said...

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

http://1.bp.blogspot.com/-4bmlgkk2x64/Uas6hagl3aI/AAAAAAAAHfk/i17-XWpXhd8/s1600/2013-06-02_192402.jpg

 
At Monday, June 3, 2013 at 4:22:00 PM GMT+7, Blogger IRIL SAGITA said...

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 !

 
At Friday, June 7, 2013 at 5:14:00 PM GMT+7, Blogger Supar said...

TRIMS MAS..

 
At Wednesday, June 19, 2013 at 10:11:00 AM GMT+7, Blogger alansinggih said...

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...

 
At Wednesday, June 19, 2013 at 10:42:00 AM GMT+7, Blogger Taufik Nurrohman said...

/2012/08/stickybar-jquery-plugin.html

 
At Saturday, July 6, 2013 at 2:21:00 PM GMT+7, Blogger Yuli Akbar said...

kak, postingin donk daftar isi versi dte

 
At Wednesday, July 8, 2015 at 6:17:00 AM GMT+7, Blogger Masiki said...

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

 
At Saturday, July 11, 2015 at 12:25:00 PM GMT+7, Blogger Taufik Nurrohman said...

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

 
At Sunday, July 12, 2015 at 3:12:00 PM GMT+7, Blogger Irfan Muhammad Ghani said...

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

 
At Friday, July 24, 2015 at 6:04:00 PM GMT+7, Blogger Taufik Nurrohman said...

// 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

 
At Monday, October 23, 2017 at 2:58:00 AM GMT+7, Blogger you said...

Kalo untuk menambahkan auto hide gimana ya mas. ?

 
At Friday, October 27, 2017 at 4:47:00 PM GMT+7, Anonymous Anonymous said...

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

 

Post a Comment

<< Home