JS实现页面返回顶部的匀加速运动

来源:互联网 发布:c程序设计经典编程题 编辑:程序博客网 时间:2024/06/11 17:22

JS实现页面返回顶部的匀加速运动

//返回顶部    //声明返回顶部的函数    function returnTop(){        var timer;        clearInterval(timer);        timer = setInterval(function(){            var now = $(document).scrollTop();            console.log(now);            var speed = (0-now)/10;            console.log(speed);            speed = speed >0 ? Math.ceil(speed):Math.floor(speed);            if(scrollTop == 0){                clearInterval(timer);            }            document.documentElement.scrollTop=scrollTop+speed*1.8;// 1.8这里可以自定义返回的速度            document.body.scrollTop=scrollTop+speed*1.8;        }, 30);    }    //控制返回顶部按钮显隐    function showTopIcon(wh , topHeight) {        if(topHeight > wh){            $("div#to_top").removeClass("hidden");        }        if(topHeight == 0){            $("div#to_top").addClass("hidden");        }    }    //初始化到页面顶部    var wh = $(window).height();    //检测滚动,并声明距离顶部的距离,公共变量方便通信    var scrollTop;    $(window).scroll(function () {        scrollTop = document.documentElement.scrollTop||document.body.scrollTop;        showTopIcon(wh , scrollTop);    });    //点击按钮返回到顶部    $("div#to_top").click(function (e) {        returnTop();        $("div#to_top").addClass("hidden");    });


0 0
原创粉丝点击