JQuery实战——页面进度条效果

今早逛阮一峰大神的博客 ECMAScript 6 入门时候看到页面顶部有个进度条显示当前浏览的进度，如图：

顶部进度条会根据当前页面高度进行宽度调整，实战一番，视觉使用animated方法实现。下面贴代码

HTML

下面是用P标签撑高页面，就不一起贴了。

JS：

DEMO：

实现步骤：

1.效果通过滚动条位置计算进度条的宽度，所以使用JQuery中的$(window).scroll()监控滚动条。

2.通过滚动条的高度、页面高度、视窗高度可以计算出当前浏览进度的百分比，然后*页面宽度可以得出进度条的宽度，这里需要使用Math.ceil()方法对宽度进行取整，以免出现像素值为小数的bug。

3.使用animate()方法实现进度条宽度的平滑伸缩，注意：如果speed设置过慢的话，连续上下滚动时会出bug，而且会因为太慢影响视觉效果，我这里取得是10，效果良好。

巴特西