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");
});