JavaScript学习笔记—仿淘宝返回顶部
分析:
- 带有动画的返回顶部
- 此时可以继续使用我们封装的动画函数
- 只需要把所有的left相关的值改为 跟 页面垂直滚动距离相关就可以了
- 页面滚动了多少,可以通过window.pageYOffset 得到
- 最后是页面滚动,使用window.scroll(x,y)
代码段:
续固定侧边栏代码
//3.当我们点击了返回顶部模块,就让窗口滚动到页面的最上方
goBack.addEventListener('click',function(){
//里面的x和y 不跟单位的 直接写数字即可
//因为是窗口滚动 所以对象是window
// window.scroll(0,0); 直接如此跳转太生硬 使用缓动动画
animate(window,0);
});
//动画函数
function animate(obj,target,callback){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var step=(target-window.pageYOffset)/10;
step=step >0 ? Math.ceil(step):Math.floor(step);
if (window.pageYOffset==target) {
clearInterval(obj.timer);
if (callback) {
callback();
}
}
//obj.style.left=obj.offsetLeft+step+'px';
// step+window.pageYOffset:页面当前被卷去的头部+步长=它最后要到达的距离
window.scroll(0,step+window.pageYOffset);
},15);
}
Learning from pink老师