返回顶部有动效且随着改变屏幕大小不会改变位置

一般右下角的返回顶部按钮，点击后会返回顶部，但是没有动效，想要加上动效的话，除了用css html,body{ scroll-behavior:smooth; }，还可以用js requestAnimationFrame方法，下面写个例子

requestAnimationFrame类似定时器和setInterval差不多，也可以取消定时器，用cancelAnimationFrame()方法

html部分

<a href="javascript:;" class="goTop">返回顶部</a>

css部分

.goTop{
  position:fixed;
  bottom:100px;
  right:50px;
  width:50px;
  height:50px;
  background:red;
  color:#fff;
}

js部分

const oA=document.querySelector(".goTop");
function goTop(){
  document.documentElement.scrollTop-=50;
  document.body.scrollTop-=50;
  let scroTop=document.documentElement.scrollTop || document.body.scrollTop
  if(scroTop>0){//当scrollTop大于0没有到顶部的时候就一直调用
    window.requestAnimationFrame(goTop);
  }
}
oA.addEventListener("click",()=>{
  window.requestAnimationFrame(goTop);
});

关于requestAnimationFrame方法的取消方法window.cancelAnimationFrame

let id=window.requestAnimationFrame(fn)//会返回一个id
window.cancelAnimationFrame(id)//传入id取消动画
//举个例子
let aId=0;
let num=0;
function fn(){
  num++;
  id=window.requestAnimationFrame(fn);
  if(num==50){
     window.cancelAnimationFrame(id);
  }
}

window.requestAnimationFrame(fn);

上面是返回顶部的动效，下面是设置按钮位置不会随着屏幕大小而改变位置

js部分

setRight(){
   const oDiv= document.querySelector("#positionBox");
   //1180是页面展示的宽度，可以改变，后面的25是调整位置的大小
   oDiv.style.right=(document.documentElement.clientWidth-1180)/2-25+"px";
}

//刚开始加载完就设置按钮的位置
setRight();
//添加屏幕改变大小的事件
window.addEventListener("resize",setRight);