移动端 vue 中实现锚点定位
2019-05-18 本文已影响0人
WEB小晶
期望效果:点击每个锚点,能够定位到锚点所在的位置。(代码规范采用的是eslint)
简单粗暴代码如下所示:
<div class="anchorPointBox">
<a
:key="index"
@click="goAnchor('#anchor-'+index)"
v-for="(item,index) in columns"
class="anchorPoint"
:class="{active:index==nowIndex}"
>{{ item.columnName }}</a>
</div>
goAnchor (selector) {
this.nowIndex = selector.slice(8, 9);
const anchor = this.$el.querySelector(selector);
this.$el.querySelector(selector).scrollIntoView();
}
效果图如图: