<script>
    export default {
		data () {
			return {
				scrollbars: null
			}
		},
		mounted () {
			this.scrollbars = document.getElementsByClassName('kc-scrollbar__wrap')[0]
		}
    }
</script>
## anchor 锚点
-------------------
用于跳转到页面指定位置。

<div id="basic_usage"></div>	

### 基础用法

最简单的用法

:::demo
```html
<kc-anchor :container="scrollbars" :affix-element="scrollbars" show-ink>
	<kc-anchor-link href="#basic_usage" title="基础用法"></kc-anchor-link>
	<kc-anchor-link href="#static_position" title="静态位置"></kc-anchor-link>
	<kc-anchor-link href="#API" title="API">
		<kc-anchor-link href="#anchor-prop" title="Anchor props" ></kc-anchor-link>
		<kc-anchor-link href="#anchor-events" title="Anchor events" ></kc-anchor-link>
		<kc-anchor-link href="#link-prop" title="AnchorLink props" ></kc-anchor-link>
	</kc-anchor-link>
</kc-anchor>
<script>
    export default {
		data () {
			return {
				scrollbars: null
			}
		},
		mounted () {
			this.scrollbars = document.getElementsByClassName('kc-scrollbar__wrap')[0]
		}
	}
</script>

```
:::

<div id="static_position"></div>

### 静态位置
不浮动，状态不随页面滚动变化。
:::demo
```html
<kc-anchor :affix=false :container="scrollbars" :affix-element="scrollbars">
	<kc-anchor-link href="#basic_usage" title="基础用法" ></kc-anchor-link>
	<kc-anchor-link href="#static_position" title="静态位置" ></kc-anchor-link>
	<kc-anchor-link href="#API" title="API">
		<kc-anchor-link href="#anchor-prop" title="Anchor props" ></kc-anchor-link>
		<kc-anchor-link href="#anchor-events" title="Anchor events" ></kc-anchor-link>
		<kc-anchor-link href="#link-prop" title="AnchorLink props" ></kc-anchor-link>
	</kc-anchor-link>
</kc-anchor>
<script>
    export default {
		data () {
			return {
				scrollbars: null
			}
		},
		mounted () {
			this.scrollbars = document.getElementsByClassName('kc-scrollbar__wrap')[0]
		}
	}
</script>

```
:::

<div id="API"></div>

### API 
<div id="anchor-prop"></div>

### Anchor props

| 参数      | 说明          | 类型      | 默认值  |
|---------- |-------------- |---------- |------- |
| affix | 固定模式 | Boolean | true |
| affix-element | 仅用于设置固定模式需要监听其滚动事件的元素，值为一个DOM元素 | HTMLElement| window |
| offset-top | 距离窗口顶部达到指定偏移量后触发 | Number |0 |
| offset-bottom | 距离窗口底部达到指定偏移量后触发 | Number | — |
| bounds | 锚点区域边界，单位：px | Number | 5 |
| scroll-offset | 点击滚动的额外距离| Number| 0 |
| container| 指定滚动的容器 | (String / HTMLElement) | — | 
| show-ink| 是否显示小圆点| Boolean | false|

<span id="anchor-events"></span>

### Anchor events

| 事件名      | 说明          | 返回值   | 
|---------- |-------------- |---------- |
| on-select | 	点击锚点时触发，返回链接 | href |
|on-change | 链接改变时触发，返回新链接和旧链接 | newHref, oldHref|

<span id="link-prop"></span>
### AnchorLink props

| 属性      | 说明          | 类型      | 默认值  |
|---------- |-------------- |---------- |------- |
| href | 锚点链接 | String | - |
| title| 	文字内容 | HTMLElement| window |
| scroll-offset | 点击滚动的额外距离 | Number | 0 |

