锚点定位平滑滑动

1、a链接 锚点定位，地址url改变，刷新页面会导致有问题，推荐使用下面第二种方法

<template>
  <div>
		<div class="nav" :class="{active: active===0}" @click="scrollTo(0)">
			<a href="#courseSystem" >课程体系</a>
		</div>
		<div class="nav" :class="{active: active===1}" @click="scrollTo(1)">
				<a href="#clickanchor" >作品广场</a>
		</div>

		<div class="con" id="courseSystem" >课程体系</div>
		<div class="con" id="opusSquare" >作品广场</div>
	</div>
</template>

data(){
	return{
		active: 0
	}
}
mounted() {
    this.$nextTick(function() {
      window.addEventListener("scroll", this.onScroll);
    });
  },
  methods:{
  	// 滚动事件触发下拉加载
    onScroll(e) {
      // 获取所有锚点元素
      const navContents = document.querySelectorAll('.contentTit')
      // 所有锚点元素的 offsetTop
      const offsetTopArr = []
      navContents.forEach(item => {
        offsetTopArr.push(item.offsetTop)
      })
      // 获取当前文档流的 scrollTop
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 定义当前点亮的导航下标
      let navIndex = 0
      for (let n = 0; n < offsetTopArr.length; n++) {
        // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
        // 那么此时导航索引就应该是n了
        if (scrollTop >= offsetTopArr[n]) {
          navIndex = n
        }
      }
      this.active = navIndex
    },
    scrollTo(index) {
      const targetOffsetTop = document.querySelector(`.contentTit`).offsetTop
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      const STEP = 50
      if (scrollTop > targetOffsetTop) {
        smoothUp()
      } else {
        smoothDown()
      }
      function smoothDown() {
        // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
        if (scrollTop < targetOffsetTop) {
          if (targetOffsetTop - scrollTop >= STEP) {
            scrollTop += STEP
          } else {
            scrollTop = targetOffsetTop
          }
          document.body.scrollTop = scrollTop
          document.documentElement.scrollTop = scrollTop
          requestAnimationFrame(smoothDown)
        }
      }
      // 定义往上滑函数
      function smoothUp() {
        if (scrollTop > targetOffsetTop) {
          if (scrollTop - targetOffsetTop >= STEP) {
            scrollTop -= STEP
          } else {
            scrollTop = targetOffsetTop
          }
          document.body.scrollTop = scrollTop
          document.documentElement.scrollTop = scrollTop
          requestAnimationFrame(smoothUp)
        }
      }
    }
  }

2、简单操作，不改变url地址，也能平滑的滚动

<template>
    <div>
		<div class="btn" :class="{active: active===0}" @click="clickanchor('#courseSystem', 0)">课程体系</div>
		<div class="btn" :class="{active: active===1}" @click="clickanchor('#opusSquare', 1)">作品广场</div>

		<div class="con" id="courseSystem" >课程体系</div>
		<div class="con" id="opusSquare" >作品广场</div>
	</div>
</template>

data(){
	return{
		active: 0
	}
}
methods:{
	clickanchor(idName,n){
      this.active = n
      document.querySelector(idName).scrollIntoView({ behavior: "smooth" });
    },	
}