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
19 Comments:
Kak, di halaman demonya kok gak berfungsi ya ?
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!
Ok terima kasih, sudah bekerja ni kak.
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
kebanyakan CSS box shadow... :D
Mantap.
Setalah aku terapkan tidak memakai box-shadow tetep berat gerakannya.
munkin temen yang lain punya solusi ?
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
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 !
TRIMS MAS..
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...
⇒ /2012/08/stickybar-jquery-plugin.html
kak, postingin donk daftar isi versi dte
Cara makenya gimana ya mas? agak bingung nih. Mohon bantuannya :D
Masukkan tombol ke dalam widget HTML/JavaScript, lalu masukkan skrip ke dalam tag <script>, lalu letakkan di bawah tombol tersebut.
bang kalau mau scroll ke bagian <div> dengan id tertentu gmn ya ?
// 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
Kalo untuk menambahkan auto hide gimana ya mas. ?
Sudah bisa di atasi mas cuma perlu ada yang ditambahin saja..
Post a Comment
<< Home