首页 > Web开发 > 详细

JS原生回到顶部效果

时间:2016-05-21 20:13:15      阅读:334      评论:0      收藏:0      [点我收藏+]
// 回到顶部
onload = function () {
    var oBtnTop = document.getElementById(‘toTop‘);
    var timer = null;

    oBtnTop.onclick = function () {

        moveScroll(0, 500);
        return false;
    };

    function moveScroll( iTarget, time ) {
        
        // 起点
        var start = document.documentElement.scrollTop || document.body.scrollTop;
        // 距离 
        var dis =  iTarget - start;
        // 次数
        var count = Math.round( time / 30 );
        var num = 0;

        console.log(start);

        clearInterval(timer);
        timer = setInterval(function() {
            num += 1;
            // 匀减速
            var a = 1 - num / count;
            var cur = start + dis*( 1 - Math.pow(a,3));

            document.documentElement.scrollTop = cur;
            document.body.scrollTop = cur;

            if( num == count ){
                clearInterval(timer);
            }

        }, 30)

    }

};

  

JS原生回到顶部效果

原文:http://www.cnblogs.com/zsongs/p/5515391.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!