2021-02-19

关于解决原生JavaScript的回到顶部功能的窗口滚动与定时器不能立即停止而且导致窗口抖动的问题

前情提要：凡是涉及 this 关键字的代码，一定要注意这一方面，this 的指向是否改变，运用过程中会 改变指向谁？

一、问题描述：

1、用原生JavaScript的
document.documentElement.scrollTop || document.body.scrollTop 实现滚动回到顶部，
2、结合给点击对象设置setInterval() 定时器函数，
3、等窗口滚动到顶部即scrollTop = 0时能正常停止，起作用，
4、但是如果中途想停止窗口滚动，在窗口滚动中途时，用户的鼠标滚动想让窗口停止滚动导致的窗口抖动，无法立即clearInterval(定时器对象)的窗口抖动问题；

二、分析原因&解决方法：

1、需要用到（ES6语法的）箭头函数 或 保存当前点击对象的this指向；
2、以上的即时停止窗口滚动回到顶部的抖动与不能立即停下的问题，

是因为在后面的 setInterval() 函数中的function() 与 
document.onmousewheel(或document.onwheel) 的function()中，
this 已经发生了改变，不是指向点击对象toTop的this了，

所以 this.set 和之前的this.set（属于toTop对象的）就不一样了，
3、所以上面说解决方法是要用到箭头函数，让this指向不改变，始终指向
toTop这个点击对象，或者用一个变量保存好之前的toTop点击对象的set 属性，再在后面的function()
中使用，以防止this变质；

或者