一个细长的垂直滚动条，可以自动生成指向文档中不同部分的节点（锚链接）。非常适合单页滚动网站和全页时间表。用jQuery和CSS/CS3编写。

如何使用它:

1.为垂直滚动条创建一个emty HTML列表。

<ul class="indicator">
  <li class="bar"></li>
</ul>

2.在网页中添加内容部分。请注意，每个部分都必须有一个唯一的数据名称:

<div class="container">
  <section data-name="Home">
    <h1>Slim One Page Scroll Indicator Example</h1>
    <p>A slim vertical scrollbar that automatically generates nodes (anchor links) pointing to different sections within the document. Great for one page scrolling website and fullpage timelines. Written in jQuery and CSS/CSS3.
    </p>
  </section>
  <section data-name="Two">
    <h1>Section Two</h1>
  </section>
  <section data-name="Three">
    <h1>Section Three</h1>
  </section>
  ... more sections here ..
</div>

3.设置垂直滚动条的样式。

.indicator {
  margin: 0;
  padding: 0;
  list-style: none;
  position: fixed;
  left: 100px;
  top: 5%;
  width: 1px;
  height: 90%;
  background: #464c63;
}
 
.indicator .bar {
  position: absolute;
  width: 1px;
  background-color: #fcf769;
  top: 0;
  left: 0;
  z-index: 0;
}

4.设置滚动条内节点（锚链接）的样式。

.node {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #FFF;
  left: -1px;
  z-index: 1;
  cursor: pointer;
  border-radius: 3px;
}
 
.node:hover {
  background: #46ffdd;
}
 
.node:hover span {
  opacity: 1;
}
 
.node:before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  left: -3px;
  top: -3px;
}
 
.node span {
  transition: all 0.4s ease-out;
  text-transform: uppercase;
  right: 4px;
  top: -16px;
  color: #FFFFFF;
  position: absolute;
  padding: 10px;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 200;
  opacity: 0;
}

5.包括必要的jQuery库。

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

6.用于激活滚动条的主JavaScript。

$(function () {
 
  function sumSection() {
    return $(".container").height();
  }
 
  function setDimensionBar() {
    $(".bar").css({
      "height": $(window).height() / sumSection() * 100 + "%" });
  }
  
  function setSection() {
    $.each($("section"), function (i, element) {
      $(element).css({
        "min-height": $(window).height() });
    });
  }
 
  function addBehaviours() {
    let sections = $("section");
    $.each($(".node"), function (i, element) {
      $(element).on("click", function (e) {
        e.preventDefault();
        let scroll = $(sections[i]).offset().top;
        $('html, body').animate({
          scrollTop: scroll },
        500);
      });
    });
  }
 
  function arrangeNodes() {
    $(".node").remove();
    $.each($("section"), function (i, element) {
      let name = $(element).data("name");
      let node = $("<li class='node'><span>" + name + "</span></li>");
      $(".indicator").append(node);
      $(node).css({
        "top": $(".indicator").height() / $(document).height() * $(element).offset().top });
    });
    addBehaviours();
  }
 
  $(window).on("scroll", function () {
    let top = window.scrollY / sumSection() * 100;
    $(".bar").css({
      "top": top + "%" });
  });
 
  $(window).on("resize", function () {
    setSection();
    arrangeNodes();
    setDimensionBar();
  });
 
  setTimeout(
  function () {
    setSection();
    arrangeNodes();
    setDimensionBar();
  },
  200);
 
});

预览截图

jQuery和CSS 超薄单页滚动指示器