Scroll to Top Animation pada Blogger

Sunday, July 7, 2013

Lama gak update status membuat admin kangen akan dunia blogger, dan kesempatan ini mungkin amdin manfaatkan untuk menulis artikel singkat, padat dan banyak 'wanted' dicari blogger-bloger untuk memudahkan pengunjung kembali keatas (back to top).

Scroll to Top Animation tutorial yang dimaksud ini sangatlah mudah untuk Anda terapkan dalam blog kesayangan. Bahkan menggunakan animasi yang dapat diatur sesuai keinginan.

/*! https://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation */
function scrollTo(element, to, duration) {

    // https://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();

}

<button onclick="scrollTo(document.body, 0, 1000);">Scroll to Top</button>

Live Demo

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini