JavaScript学习笔记—仿淘宝返回顶部

JavaScript学习笔记—仿淘宝返回顶部

分析：

1. 带有动画的返回顶部
2. 此时可以继续使用我们封装的动画函数
3. 只需要把所有的left相关的值改为 跟 页面垂直滚动距离相关就可以了
4. 页面滚动了多少，可以通过window.pageYOffset 得到
5. 最后是页面滚动，使用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老师