vue锚点

1. html5

<div class="footer" @click="returnTop">
 methods:{
    returnTop:function(){
      document.querySelector("#header").scrollIntoView(true);
    }
  }

#header指哪个div要到顶部

true指顶部

false指底部

2.自定义指令

在main.js中

import anchorFunc from './js/anchor.js';

Vue.directive("anchor", anchorFunc) 

在anchor.js中

export default {
    inserted: function(el, binding) {
        el.onclick = function() {
            let total;
            if (binding.value == 0) {
                total = 0;
            } else {
                total = document.getElementById(`anchor-${binding.value}`).offsetTop;
            }
            let distance = document.documentElement.scrollTop || document.body.scrollTop;
            let step = total / 50;
            if (total > distance) {
                (function smoothDown() {
                    console.log(step)
                    if (distance < total) {
                        distance += step;
                        document.body.scrollTop = distance;
                        setTimeout(smoothDown, 5);
                        console.log(distance)
                    } else {
                        document.documentElement.scrollTop = total;
                    }
                })();
            } else {
                let newTotal = distance - total;
                step = newTotal / 50;
                (function smoothUp() {
                    if (distance > total) {
                        distance -= step;
                        document.documentElement.scrollTop = distance;
                        setTimeout(smoothUp, 5);
                    } else {
                        document.documentElement.scrollTop = total;
                    }
                })();
            }

        }
    }
}

在组件.vue文件夹中

        <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>

一定要要加

body,html{

   overflow-y: scroll;

}