Ketika sebaris kode tak berhenti menatap dan tampak naksir kepada Anda.

Home » Desain » JavaScript » Potongan » Cross Browser Scroll to Top Animation (JavaScript)

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>

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

Posting Komentar

Nama Saya ShannenPio . Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias . Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Kontak Sosial

Lain-lain

Dan Tidak lupa, Saya Ucapkan terimakasih atas kunjungan anda di blog yang sederhana ini.

Salam Mas Harris

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?

Tutup
Ke atas!