移动端 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();

    }

效果图如图:

上一篇下一篇

猜你喜欢

热点阅读