其实写一个回到顶部的浮窗也就100多行代码(包括空行)。写浮窗效果有三个难点,一个是解决ie6下的抖动效果,因为ie6不支持position:fixed这个属性。二是要解决窗口只适应问题。三是计算位置。
对于第一个难点,下面有个链接,大家可以去看看,研究一下怎么解决http://jslover.com/?p=66。这里面讲得很清楚。一开始的时候发现在ie6下不知道为啥offset的取值一直不对,弄了好久,发现是position默认设置为fixed了,所以以后遇到jquery函数取值一直很奇怪的时候,看看标签的属性是否设置正确。还有,在非ie6的情况下,我是设置动画效果的,ie6没有动画效果。有时候可以对ie6进行一些取舍。
窗口大小的变化也是一个很蛋疼的问题,主要还是因为ie6(他nnd)。作为一个前端工程师,我们要把用户的体验做到极致,因此我们不能不考虑那些经常改变窗口大小的人。在改变窗口的大小的时候,我们需要重新计算浮窗的位置。
实现代码看
https://github.com/angrytoro/jquery.plug/blob/master/jquery.backtop.js
欢迎大家修改指正错误。