关联锚点和页面滚动

[yaofly2012]

一、背景

最近要实现一个效果（如Demo）：

1. 用户点击页面菜单时，则页面平滑的滚动指定的内容；
2. 用户页面滚动时，则对应的页面菜单页切换。

二、实现方案

2.1 原始方式

1. feature1: scrollIntoView({ behavior: 'smooth' })
2. feature2: 监听滚动事件，计算锚点offset，进而计算切换哪个菜单

需要考虑的事情：

用户点击菜单也会触发页面滚动，会导致实现feature2的功能中滚动事件处理函数执行（此时最好屏蔽）。

兼容性：

1. Edge 44 平滑滚动不支持
2. IE更差

平滑滚动

针对不支持平滑滚动的浏览器可以采用JS动画的方式实现（如jQuery animate）。

2.2 使用IScroll

IScroll本身就是解决Web平滑滚动的，可以使用IScroll实现。

1. feature1: scrollToElement
2. feature2: 绑定scroll事件，计算锚点offset（相对于`wrapper），进而计算切换哪个菜单。

2.3 antd Anchor组件实现

三、锚点漂移和固定菜单

浏览器展示锚点的位置窗口的顶部。如果此时有固定的头部菜单，会造成菜单覆盖锚点所在的页面内容。 解决方案：利用absolute定位将锚点上移（上移距离菜单高度而定）

title {
      position: relative;

      &-anchor {
        position: absolute;
        left: 0;
        top: -56px; // 根据实际菜单高度调整
      }
}

<h2 class="title">
   Anchor1
    <div id="anchor1" className="title-anchor" />
  </h2>

原本是h2作为锚点的，现在把真实的锚点改成h2 > div，这样：

1. h2只负责锚点展示
2. h2 > div负责锚点定位

Issues:

1. 获取元素相对文档的位置中parentNode PK offsetParent

参考

1. 记 · 滚动条滚动到指定位置(锚点)的不同实现方式
2. IScroll