码迷,mamicode.com
首页 > Web开发 > 详细

JS原生回到顶部效果

时间:2016-05-21 20:13:54      阅读:152      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!