vue中使用锚点定位

vue中使用锚点定位

<template>
<div>
<div>
  <a href="javascript:void(0)" v-anchor="index" v-for="index in 20"> {{index}} </a>
</div>
 <div :id="'anchor-'+index" class="item" v-for="index in 20" >{{index}}</div>
</div>
</template>
<script>
import Vue from 'vue'
import $ from 'jquery'
Vue.directive('anchor', {
  inserted: function (el, binding) {
    el.onclick = function () {
      document.documentElement.scrollTop = $('#anchor-' + binding.value).offset().top
    }
  }
})
export default{
  data () {
    return {

    }
  }
}
</script>
<style>
.item{
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
}

</style>

本文参考链接:https://blog.csdn.net/Null_Bu…

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理