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>
Labels: Desain, JavaScript, Potongan
18 Comments:
Kak, di halaman demonya kok gak berfungsi ya ?
By IRIL SAGITA, at Saturday, June 1, 2013 at 10:28:00 PM GMT+7
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!
By Taufik Nurrohman, at Saturday, June 1, 2013 at 11:01:00 PM GMT+7
Ok terima kasih, sudah bekerja ni kak.
By IRIL SAGITA, at Sunday, June 2, 2013 at 6:52:00 AM GMT+7
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
By IRIL SAGITA, at Sunday, June 2, 2013 at 7:23:00 AM GMT+7
kebanyakan CSS box shadow... :D
By Unknown, at Sunday, June 2, 2013 at 8:48:00 AM GMT+7
Setalah aku terapkan tidak memakai box-shadow tetep berat gerakannya.
munkin temen yang lain punya solusi ?
By IRIL SAGITA, at Sunday, June 2, 2013 at 3:46:00 PM GMT+7
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
By Taufik Nurrohman, at Sunday, June 2, 2013 at 7:32:00 PM GMT+7
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 !
By IRIL SAGITA, at Monday, June 3, 2013 at 4:22:00 PM GMT+7
TRIMS MAS..
By Supar, at Friday, June 7, 2013 at 5:14:00 PM GMT+7
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...
By alansinggih, at Wednesday, June 19, 2013 at 10:11:00 AM GMT+7
⇒ /2012/08/stickybar-jquery-plugin.html
By Taufik Nurrohman, at Wednesday, June 19, 2013 at 10:42:00 AM GMT+7
kak, postingin donk daftar isi versi dte
By Yuli Akbar, at Saturday, July 6, 2013 at 2:21:00 PM GMT+7
Cara makenya gimana ya mas? agak bingung nih. Mohon bantuannya :D
By Masiki, at Wednesday, July 8, 2015 at 6:17:00 AM GMT+7
Masukkan tombol ke dalam widget HTML/JavaScript, lalu masukkan skrip ke dalam tag <script>, lalu letakkan di bawah tombol tersebut.
By Taufik Nurrohman, at Saturday, July 11, 2015 at 12:25:00 PM GMT+7
bang kalau mau scroll ke bagian <div> dengan id tertentu gmn ya ?
By Irfan Muhammad Ghani, at Sunday, July 12, 2015 at 3:12:00 PM GMT+7
// 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
By Taufik Nurrohman, at Friday, July 24, 2015 at 6:04:00 PM GMT+7
Kalo untuk menambahkan auto hide gimana ya mas. ?
By you, at Monday, October 23, 2017 at 2:58:00 AM GMT+7
Sudah bisa di atasi mas cuma perlu ada yang ditambahin saja..
By Anonymous, at Friday, October 27, 2017 at 4:47:00 PM GMT+7
Post a Comment
<< Home