这是一个用JavaScript（jQuery）、HTML和CSS编写的细长顶部滚动位置指示器。

滚动位置指示器用于指示当前正在滚动元素中查看的页面的位置。这可以用来让你知道你在一长串内容中的页面上的位置。这个概念相当古老，并且已经在许多交互式应用程序中实现。

参见：

• JavaScript和CSS中的10个最佳阅读进度指标

如何使用它:

1.创建一个空的DIV来保持滚动位置指示器。

<div class="scroll-line"></div>

2.在文档中加载最新的jQuery库。

<script src="/path/to/cdn/jquery.slim.min.js"></script>

3.在向下/向上滚动页面时更新滚动位置指示器。

$(window).scroll(function() {
  var wintop = $(window).scrollTop(), docheight =
  $(document).height(), winheight = $(window).height();
  var scrolled = (wintop/(docheight-winheight)) * 100;
  $('.scroll-line').css('width', (scrolled + '%'));
});

4.将您自己的CSS样式应用于滚动位置指示器。

.scroll-line {
  height: 2px;
  margin-bottom: -2px;
  background: rgb(4, 0, 255);
  width: 0%;
}

更新日志：

2022-11-18

• CSS更新

预览截图

jQuery中 细长顶部滚动位置指示器