# Anchor 锚点

用于跳转到页面指定位置。

## 使用场景

需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。

## 案例演示

### Anchor 锚点基本使用

---demo
```js
import { Anchor } from 'amos-framework';

const { Link } = Anchor;

ReactDOM.render((
  <Anchor>
    <Link href="#菜单1" title="菜单1" />
    <Link href="#菜单2" title="菜单2" />
    <Link href="#菜单3" title="菜单3">
      <Link href="#菜单3-1" title="菜单3-1" />
      <Link href="#菜单3-2" title="菜单3-2" />
    </Link>
  </Anchor>
), _react_runner_);
```
---demoend

### Anchor 自定义 onClick 事件

注意：点击锚点不记录历史。

---demo
```js
import { Anchor } from 'amos-framework';

const { Link } = Anchor;

const handleClick = (e, link) => {
  e.preventDefault();
  console.log(link);
};

ReactDOM.render((
  <Anchor affix={false} onClick={handleClick}>
    <Link href="#菜单1" title="菜单1" />
    <Link href="#菜单2" title="菜单2" />
    <Link href="#菜单3" title="菜单3">
      <Link href="#菜单3-1" title="菜单3-1" />
      <Link href="#菜单3-2" title="菜单3-2" />
    </Link>
  </Anchor>
), _react_runner_);
```
---demoend

### Anchor 静态位置

不浮动，状态不随页面滚动变化。

---demo
```js
import { Anchor } from 'amos-framework';

const { Link } = Anchor;

const handleClick = (e, link) => {
  e.preventDefault();
  console.log(link);
};

ReactDOM.render((
  <Anchor affix={false} onClick={handleClick}>
    <Link href="#菜单1" title="菜单1" />
    <Link href="#菜单2" title="菜单2" />
    <Link href="#菜单3" title="菜单3">
      <Link href="#菜单3-1" title="菜单3-1" />
      <Link href="#菜单3-2" title="菜单3-2" />
    </Link>
  </Anchor>
), _react_runner_);
```
---demoend

### Anchor 使用数据

直接传入锚点数据

---demo
```js
import { Anchor } from 'amos-framework';

const handleClick = (e, link) => {
  e.preventDefault();
  console.log(link);
};

const datas = [
  { key: 'm1', href: '#菜单1', title: '菜单1' },
  { key: 'm2', href: '#菜单2', title: '菜单2' },
  { key: 'm3', href: '#菜单3', title: '菜单3', children: [
    { key: 'm3-1', href: '#菜单3-1', title: '菜单3-1' },
    { key: 'm3-2', href: '#菜单3-2', title: '菜单3-2' },
    { key: 'm3-3', href: '#菜单3-3', title: '菜单3-3', children: [
      { key: 'm3-3-1', href: '#菜单3-3-1', title: '菜单3-3-1' }
    ] },
  ] },
  { key: 'm4', href: '#菜单4', title: '菜单4' },
];

ReactDOM.render((
  <Anchor affix={false} onClick={handleClick} datas={datas} />
), _react_runner_);
```
---demoend


### Anchor 综合使用

综合使用，点击 Link 定位内容；同时，内容滚动选中 Link。

---demo
```js
import { Anchor } from 'amos-framework';

const { Link } = Anchor;

const styles = {
  wrap: {
    display: 'flex',
    height: '200px',
    background: '#d2d2d2'
  },
  scroll: {
    position: 'relative',
    flex: 1,
    background: '#ddd',
    overflow: 'auto'
  },
  item: {
    border: '1px solid red',
    height: '260px',
    textAlign: 'center',
    margin: 6
  }
};

class Demo extends Component {
  render() {
    return (
      <div style={styles.wrap}>
        <div>
          <Anchor getContainer={() => document.getElementById('anchorContentScroll')}>
            <Link href="#amenu-1" title="菜单1" />
            <Link href="#amenu-2" title="菜单2" />
            <Link href="#amenu-3" title="菜单3" />
            <Link href="#amenu-4" title="菜单4" />
            <Link href="#amenu-5" title="菜单5" />
          </Anchor>
        </div>
        <div style={styles.scroll} id="anchorContentScroll">
          <div id="amenu-1" style={styles.item}>内容1</div>
          <div id="amenu-1" style={styles.item}>内容2</div>
          <div id="amenu-1" style={styles.item}>内容3</div>
          <div id="amenu-1" style={styles.item}>内容4</div>
          <div id="amenu-1" style={styles.item}>内容5</div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## API

### Anchor

|name|type|default|description|
|------|------|------|-------|
| className | string | - | 自定义样式名 |
| style | Object | - | 自定义内联样式 |
| affix | boolean | true | 固定模式 |
| bounds | number | `5(px)` | 锚点区域边界 |
| getContainer | `() => HTMLElement` | `() => window` | 指定滚动的容器, 滚动区域与 `Anchor` 联合时使用 |
| offsetBottom | number | - | 距离窗口底部达到指定偏移量后触发 |
| offsetTop | number | - | 距离窗口顶部达到指定偏移量后触发 |
| showRakeInFixed | boolean | false | 固定模式是否显示钉耙 |
| onClick | `Function(e: Event, obj: { title, href, eventKey }, linkNode: Link)` | - | `click` 事件的 handler |
| onScrollChange | `Function(obj: { link: String, eventKey: String })` | - | 指定区域滚动时回调 |
| noUseHash | boolean | true | 不采用 href hash 方式进行锚链接 |
| datas | `Array<Object>` | - | 传入锚点数据，用于生成锚点，数据格式详见 `Anchor 使用数据` 案例 |

> 注意： 针对 `onScrollChange` 处理时，需要考虑数据变化时，才进行数据更新，以防多次重复进行数据处理。

### Link

|name|type|default|description|
|------|------|------|-------|
| className | string | - | 自定义样式名 |
| href | string | - | 锚点链接 |
| title | `string or ReactNode` | - | 文字内容 |
| eventKey | `string` | - | 数据 `key` |

> 注意：如果采用 `datas` 进行创建，`eventKey` 默认与 `key` 相同