JavaScript study notes - imitation Taobao Back to top

JavaScript study notes - imitation Taobao Back to top

analysis:

1. Top with animations
2. At this point you can continue to use our package of animation function
3. Just put all the left associated value to a page relative vertical scrolling distance on it
4. Scroll the page number, can be obtained by window.pageYOffset
5. Finally, page scrolling, using window.scroll (x, y)

Snippet:

续固定侧边栏代码

//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老师