Cross Browser Scroll to Top Animation (JavaScript)
Tabel Konten
/*! 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>
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 elemendocument.body
dandocument.documentElement
secara bersamaan bisa bekerja:Sebenarnya kasusnya sama seperti animasi scroll dengan JQuery. Selektor HTML dan BODY harus digabungkan:
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...
Taufik Nurrohman
⇒ /2012/08/stickybar-jquery-plugin.html
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
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..