现在很多博客都会有这样一种效果，当滚动条上下移动时，顶部或者底部会有进度条一样的效果，以显示当前滚动的位置，这样的效果就叫做滚动指示器。代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .bar{ position: fixed; top: 0; height: 10px; background-color: #55a; } .content{ height: 2000px; } </style> </head> <body> <div class="bar"></div> <div class="content"></div> <script type="text/javascript"> var body = document.body, html = document.documentElement, bar = document.querySelector('.bar'); //初始化滚动指示器宽度 bar.style.width = body.scrollTop || html.scrollTop / (body.clientHeight - html.clientHeight) * body.clientWidth + 'px'; window.onscroll = function(){ var scrollTop = body.scrollTop || html.scrollTop;//获取scrollTop，因为FireFox下需要用document.documentElement.scrollTop来获取 bar.style.width = scrollTop / (body.clientHeight - html.clientHeight) * body.clientWidth + 'px'; } </script> </body> </html>
原理很简单，通过scrollTop / (body的内容区域高度 - 可视区域的高度)的比，来得出当前滚动条相对于内容区域的位置，再跟内容区域相乘就可以了。
推荐这篇文章，用css来实现的。无奈css功底不够，只能用js来实现了。