#vue# vue锚点定位，滚动到具体位置

需求：

点击导航栏的各个tab，跳转（滚动）到当前页面的具体位置

步骤： 

（1）首先在导航栏的版块里面加入方法goToAnchor，以及（'#跳转的id类名'）

<div class="nav-item-center">
      <div @click="goToAnchor('#About')" >About</div>
      <div @click="goToAnchor('#Tokenomics')">Tokenomics</div>
      <div @click="goToAnchor('#TheRoadmap')" >The Roadmap</div>
      <div @click="goToAnchor('#SpikeSlements')">Spike Slements</div>
</div>

 （2）接着在各个要跳转的位置（当前页面的具体几个版块），加入id=""

//版块1
<div class="item-about" id="About">
      <div class="title">ABOUT THE SPIKE DOGE</div>
      <div class="line"></div>
</div>

//版块2
<div class="item-about"  id="Tokenomics" >
      <div class="title">TOKENOMICS</div>
      <div class="line"></div>
</div>

//版块3
<div class="item-about"  id="TheRoadmap" >
     <div class="title">THE ROADMAP</div>
     <div class="line"></div>
</div>

//版块4
<div class="item-about" id="SpikeSlements" >
      <div class="title">SPIKE SLEMENTS</div>
      <div class="line"></div>
</div>

（3）最后，在method里面加入方法

methods: {
      goToAnchor(selector) {
          this.$el.querySelector(selector).scrollIntoView();
            }
        }

就这样搞定了！

效果图