TWEEN.js

引入地址更新网站
动画速率效果图
示例：

function animate(time) {
    requestAnimationFrame(animate);
    TWEEN.update(time);
  }
  requestAnimationFrame(animate);

 var coords = { x:0,y: 0 };//开始坐标
      var tween = new TWEEN.Tween(coords)
        .to({ x:200,y: 200 }, 1000)//一秒内移动到目标坐标
        .easing(TWEEN.Easing.Quadratic.InOut)//动画类型
        .onUpdate(function () {
          
        })
        .start();

新API

1.let id = setInterval(()=>{
},time)
if(xxx){
window.clearInterval(id)}
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

2.父亲节点：parentNode/parentElement
父节点的所有子元素：parentNode.children 是一个哈希

3.data-* 添加标记，可以直接使元素也能编辑

4.setTimeout(function(){},1000) 1s后执行这个操作

新增的代码

window.onscroll = function () {//页面滚动时
    if (window.scrollY > 0) {
      topNavBar.classList.add('sticky')
    } else {
      topNavBar.classList.remove('sticky')
    }
    let markTags = document.querySelectorAll('[data-x]')//找到所有被标记的标签
    let minIndex = 0//假设这个是最小的
    for (let i = 1; i < markTags.length; i++) {//如果i比minIndex还小
      if (Math.abs(markTags[i].offsetTop - window.scrollY) < Math.abs(markTags[minIndex].offsetTop - window.scrollY)) {//对比差值的绝对值，找最近的
        minIndex = i
      }
    }
    for (let i = 0;i <markTags.length; i++){
      markTags[i].classList.remove('moved')//遍历全部被标记的，先全部去掉状态moved
    }
    markTags[minIndex].classList.add('moved')//最接近页面顶部的的加上状态
    let id = markTags[minIndex].id//找到当前的id
    let a = document.querySelector('a[href="#' + id + '"]')//找到id对应的a标签
    let li = a.parentNode//找到a标签的父亲节点
    let childrens = li.parentNode.children//该父节点的全部儿子
    for (let i=0;i<childrens.length;i++){
      childrens[i].classList.remove('moved')//先给所有的儿子去掉状态
    }
    li.classList.add('moved')//给当前的儿子加上状态
  }

添加缓动代码

function animate(time) {//TWENN.js效果开头。抄就完了，记就完了
    requestAnimationFrame(animate);
    TWEEN.update(time);
  }
  requestAnimationFrame(animate);

  for (let i = 0; i < aTags.length; i++) {
    aTags[i].onclick = function (x) {
      x.preventDefault()//阻止点击a标签时候的动作
      let a = x.currentTarget
      let href = a.getAttribute('href')
      let element = document.querySelector(href)
      let top = element.offsetTop

      let currentTop = window.scrollY
      let targretTop = top - 70
      var coords = { y: currentTop };//当前高度
      var tween = new TWEEN.Tween(coords)
        .to({ y: targretTop }, 1000)//一秒后 目标位置
        .easing(TWEEN.Easing.Quadratic.InOut)//动画类型
        .onUpdate(function () {
          window.scrollTo(0, coords.y)//需要的操作。滚动到该目标位置
        })
        .start();
    }
  }

设置滚动到时候 有个缓升动作

let markTags = document.querySelectorAll('[data-x]')
  for (let i = 0;i <markTags.length; i++){
    markTags[i].classList.add('riseup')//所有被标记的先下沉100px
  }
  setTimeout(function(){
    scrollto()
  },100)//第一个标记的先运行一次上升动作，刷新的时候就看到
  window.onscroll = function () {
    if (window.scrollY > 0) {
      topNavBar.classList.add('sticky')
    } else {
      topNavBar.classList.remove('sticky')
    }
    scrollto()//执行下面那个函数
  }
  function scrollto(){//用一个函数包起来
    let markTags = document.querySelectorAll('[data-x]')
    let minIndex = 0
    for (let i = 1; i < markTags.length; i++) {
      if (Math.abs(markTags[i].offsetTop - window.scrollY) < Math.abs(markTags[minIndex].offsetTop - window.scrollY)) {
        minIndex = i
      }
    }
    for (let i = 0;i <markTags.length; i++){
      markTags[i].classList.remove('moved')
    }
    markTags[minIndex].classList.remove('riseup')//滚到的时候移除状态，回复原来位置，看起来就上升了
    markTags[minIndex].classList.add('moved')
    let id = markTags[minIndex].id
    let a = document.querySelector('a[href="#' + id + '"]')
    let li = a.parentNode
    let childrens = li.parentNode.children
    for (let i=0;i<childrens.length;i++){
      childrens[i].classList.remove('moved')
    }
    li.classList.add('moved')
  }