jQuery–制作回到顶部的效果
瞬间滚动到顶点
$('#to-top').click(function(){
//瞬间滚动到顶点
$('html,body').scrollTop(0);
}
show–before
show–after
= =========== =================
间隔滚动到顶点
-
总距离
var distance = $ (‘html’).scrollTop()+$(‘body’).scrollTop(); -
总时间
var time = 500; -
时间间隔
var intervalTime = 50; -
一次间隔的距离
var itemDistance = distance/(time/intervalTime); -
使用循环定时器不断滚动
distance-=itemDistance;
$ (‘html,body’).scrollTop(distance);【注意:
读取滚动scrollTop值使用 (兼容IE与chrome)
$ (‘html’).scrollTop()+$ (‘body’).scrollTop();设置scrollTop值使用
$(‘html,body’). scrollTop(设置的值)
】 -
判断是否到达顶部,停止定时器
if(distance<=0){
distance=0;
clearInterval(intervalId);
}
$('#to-top').click(function(){
//间隔滚动到顶点
//总距离
var $page = $('html,body');
var distance = $('html').scrollTop()+$('body').scrollTop();
//总时间
var time = 500;
//间隔时间
var intervalTime = 50;
//一次的距离
var itemDistance = distance/(time/intervalTime);
//使用循环定时器不断滚动
var intervalId = setInterval(function(){
//判断是否到达顶部,停止定时器
if(distance<=0){
distance=0;
clearInterval(intervalId);
}
distance-=itemDistance;
$page.scrollTop(distance);
},intervalTime)
})
})
show-before
show-after