回到顶部按钮制做

一、前言

慕课网视频是用JS写的，兼容性存在一些差别。因此我想用JQ再从新实现一遍。

二、需求点

1. “回到顶部”图标出如今右下角，而且只在页面第二屏时显示。
2. 点击“回到顶部”图标后，页面滚动回顶部。
3. 回滚时，速度由快变慢。并在回滚时能够中断。

三、具体实现

HTML代码：

CSS代码

JS代码

运行效果：

总结：

1. 京东商场的回到顶部的方法是锚点法，<a href='#'></a>
2. 淘宝商城的回到顶部的方法是滚动，但中途不能中止。
3. 慕课网视频教学中的bug，当双击回到顶部时。就算到了顶部也不会中止。应该是冒泡了。
4. 给A标签增长自定义属性rolling-in，做为控制器，配合return false;防止重复点击。
5. 优化方向，回滚时进入第一屏后。回到顶部的图标淡出，就完美了。