需要
页面上有一排按钮css定位悬浮，悬浮在窗口顶部，不随着页面的滑动而滑动。 这组按钮对应页面的各个部分，点击该按钮，页面就位于对应的位置。
需求分析
收到这个需求后，很自然的想到解决这个问题最简单的方法就是使用锚点（可以通过HTML和CSS解决，尽量不要使用js
解决方案
使用锚点想到的比较简单。 我借用了a标签的href位置，很快就写了一个demo。
完整代码：
关键代码：
这时，点击浮动按钮，即可快速定位页面。
一号坑
点了几下后，我立刻发现了一个洞。 由于按钮是浮动的，并且锚点默认位于窗口顶部，因此浮动按钮会遮挡部分定位区域。
如右图所示：
原始状态：
点击“Anchor Point 1”按钮后（红框中的部分是被覆盖的部分）：
这就引出了一个问题，如何防止a标签的锚点定位在窗口顶部呢？
如何将a标签的锚点定位到窗口的任意位置方法一：
网上搜了一些技巧，其中提到使用：target，主要是添加几行css
#anchor1:target, #anchor2:target, #anchor3:target {
padding-top: 100px; // 这里更改padding-top的值使其定位到不同地方
}疗效如右图：
其实它可以实现文本不被遮挡，而且实际上对于固定大小的div来说，很容易影响div的内部布局，所以不太适用于我这里的情况（但是:target这里对于其他地方来说还是很重要的。
方式二
另外，我想到了一个巧妙的办法，在每个需要定位的节点后面添加一个辅助节点。 辅助节点的高度可以自定义，锚点实际定位的就是这个辅助节点。
完整代码：
关键代码：
anchor1
anchor2
anchor3
辅助节点的css:
.assist-div {
width: 1px;
height: 1px;
position: absolute;
top: -100px; // 这里可以设任意高度 对应锚点最后离窗口顶端的距离
left: 0;
}这种方法的优点：
(1)辅助节点可以绝对定位，不影响布局
（2）改变辅助节点的top值可以实现锚点定位到窗口的任意位置
最终疗效截图：（点击“锚点2”按钮）
坑2
正当我等待1个小时后的聚会交付任务时，PM来找我说，不行，联通终端一打开，我就切换到浮动按钮了几次css定位悬浮，然后按了返回按钮多次。 可以退出页面。
我：是的，因为每点击一个键，浏览器记录中就会添加一条记录
PM：这不起作用，需要解决
。 。 。
这是个问题。 用户需要点击多次才能退出页面。 体验真的很糟糕。 如果你想让用户点击一次就退出页面，你就得在历史记录中只保留一条记录，如果a标签发生跳转，就手动在历史记录中添加一条记录。 我对此也无能为力。
。 。 。
