overflow 与锚点定位

---

锚点，通俗点的解释就是可以让页面定位到某个位置的点。

基于URL 地址的锚链实现锚点跳转的方法有两种

1. 一种是<a>标签以及name 属性
   <a href="#1">发展历程></a>
   <a name="1"></a>
2. 使用标签的id 属性
   <a href="#1">发展历程></a>
   <h2 id="1">发展历程</h2>

锚点定位行为的触发条件

下面两种情况都可以触发锚点定位行为的发生：
（1）URL 地址中的锚链与锚点元素对应并有交互行为；
（2）可focus 的锚点元素处于focus 状态。

  “focus 锚点定位”指的是类似链接或者按钮、输入框等可以被focus 的元素在被focus时发生的页面重定位现象。
  举个很简单的例子，在PC 端，我们使用Tab 快速定位可focus 的元素的时候，如果我们的元素正好在屏幕之外，浏览器就会自动重定位，将这个屏幕之外的元素定位到屏幕之中。
  再举一个例子，一个可读写的<input>输入框在屏幕之外，则执行类似下面的JavaScript 代码的时候：
document.querySelector('input').focus();
这个输入框会自动定位在屏幕之中，这些就是“focus 锚点定位”。

  同样，“focus 锚点定位”也不依赖于JavaScript，是浏览器内置的无障碍访问行为，并且所有浏览器都是如此。
  虽然都是锚点定位，但是这两种定位方法的行为表现还是有差异的，
  “URL 地址锚链定位”是让元素定位在浏览器窗体的上边缘；
  而“focus 锚点定位”是让元素在浏览器窗体范围内显示即可，不一定是在上边缘。

锚点定位作用的本质

  锚点定位行为的发生，本质上是通过改变容器滚动高度或者宽度来实现的。（是容器的滚动高度，而不是浏览器的滚动高度）

  首先，锚点定位也可以发生在普通的容器元素上，而且定位行为的发生是由内而外的。
URL锚点定位的例子：

.box {
  height: 120px;
  border: 1px solid #bbb;
  overflow: auto;
}
.content {
  height: 200px;
  background-color: #eee;
}

参照《CSS世界》P173，修改了h4标签和div[class="content"]标签的位置，这样才能出现图6-35的效果

<div class="box">
  <h4 id="title">底部标题</h4>
  <div class="content"></div>
</div>
<p><a href="#title">点击测试</a></p>

  由于.content 元素高度超过.box 容器，因此<h4>元素必然不可见，如图6-33 所示。然后，我们点击下面的“点击测试”链接，则滚动条位置变化（实际上改变了scrollTop值），“底部标题”自动出现了，如图6-34 所示。

  “由内而外”指的是，普通元素和窗体同时可滚动的时候，会由内而外触发所有可滚动窗体的锚点定位行为。继续上面的例子，假设我们的浏览器窗体也是可滚动的，则点击“点击测试”链接后，“底部标题”先触发.box 容器的锚点定位，也就是滚动到底部，然后再触发窗体的锚点定位，“底部标题”和浏览器窗口的上边缘对齐，如图6-35 所示（图中最上方一条线就是浏览器窗体上边缘）。