前端VueTS一键置顶（底）

方法一（推荐）：RequestAnimationFrame

const toTop=()=>{
  let scrollTop = document.documentElement.scrollTop
  let steep = 20;
  let rafId:number
  let toTopStep = ()=>{
    scrollTop = Math.max(0,scrollTop-steep)
    document.documentElement.scrollTop = scrollTop
    if (scrollTop>0){
      rafId = requestAnimationFrame(toTopStep)
    }else{
      cancelAnimationFrame(rafId);
    }
  }
  rafId = requestAnimationFrame(toTopStep)
}

const toBelow=()=>{
  let steep = 20
  let scrollTop = document.documentElement.scrollTop
  let webHeight = document.body.clientHeight
  let innerHeight = document.documentElement.clientHeight
  let scrollMaxBottom = webHeight - innerHeight
  let rafId:number
  let toBelowStep = ()=>{
    scrollTop = Math.min(scrollMaxBottom, scrollTop+steep)
    document.documentElement.scrollTop = scrollTop
    if (scrollTop<scrollMaxBottom){
      rafId = requestAnimationFrame(toBelowStep)
    }else {
      cancelAnimationFrame(rafId)
    }
  }
  rafId = requestAnimationFrame(toBelowStep)
}

方法二：SetInterval

const toTop=()=>{
  let steep = 20
  let timer = setInterval(()=>{
     scrollTop -= steep
     if (scrollTop<=0){
       clearInterval(timer)
     }
     document.documentElement.scrollTop = scrollTop
  },10)
}

const toBelow=()=>{
  let steep = 20
  let scrollTop = document.documentElement.scrollTop
  let webBodyLength = document.body.clientHeight
  let screenVisualLength = document.documentElement.clientHeight
  let target = webBodyLength-screenVisualLength
  let timer = setInterval(()=>{
    crollTop = Math.min(scrollTop+steep, target)
    if (scrollTop>=target){
       clearInterval(timer);
    }
    document.documentElement.scrollTop = scrollTop
  },10)
}