Js 平滑滚动到某一位置window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行.当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配

js实现动画：

平滑滚动到某一位置：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>滚动到页面指定元素</title>
  <style type="text/css">
    #target{
      position: absolute;
      top:4000px;
      width: 100%;
      background: #49a9ee;
    }
    #btn{
      position: fixed;
      top:0;
      left:0;
      padding:5px 20px;
      background: #00a854;
    }
  </style>
</head>
<body>
<button type="button" id="btn">scroll</button>
<img  alt=""
src="https://pic4.zhimg.com/80/v2-e011998436428d4c032416333a4cb058_720w.jpg">
<img  alt="" lazyload=true
src="https://pic2.zhimg.com/80/v2-0c5d5b1401590bee6b55fb11734f0298_720w.jpg">
<img  alt="" lazyload=true
src="https://pic4.zhimg.com/80/v2-17d534ee853fe12109c158b5780970ff_720w.jpg">
<img  alt="" lazyload=true
src="https://pic1.zhimg.com/80/v2-959ef535ec78b21d48f70ebde4cd168a_720w.jpg">
<img  alt="" lazyload=true
src="https://pic1.zhimg.com/80/v2-f457edab6aaccd4ca4e85679ea8cb730_720w.jpg">
<img  alt="" lazyload=true
src="https://pic1.zhimg.com/80/v2-d5a33bd3f8b2037b00943a8bb6515c54_720w.jpg">
<img  alt="" lazyload=true
src="https://pic1.zhimg.com/80/v2-3717f52544ee146404594e8845e620d9_720w.jpg">
<img  alt="" lazyload=true
src="https://pic3.zhimg.com/80/v2-3268f96a253ae093946bb42b2639f1ac_720w.jpg">
<img  alt="" lazyload=true
src="https://pic3.zhimg.com/80/v2-2b7a96ba5a85644a930a82e8e3ba512f_720w.jpg">
<img  alt="" lazyload=true
src="https://pic4.zhimg.com/80/v2-11cfe8fe00d88bf00fb007e453faadac_720w.jpg">
<img  alt="" lazyload=true
src="https://pic1.zhimg.com/80/v2-f27bf527e0dcdf793dcaab1d13f1b6a8_720w.jpg">

<img  alt="" lazyload=true
src="https://pic4.zhimg.com/80/v2-50a26dfad91b940961dc15a4728ed92d_720w.jpg">
<img  alt="" lazyload=true
src="https://pic4.zhimg.com/80/v2-2ee0e476de11f96b7e32262b3144e2ae_720w.jpg">
<img  lazyload=true alt=""
src="https://pic4.zhimg.com/80/v2-e011998436428d4c032416333a4cb058_720w.jpg">

<img  lazyload=true alt=""
src="https://pic3.zhimg.com/80/v2-4caf0c9270c3f0684cfd90842259e947_720w.jpg">

<img  lazyload=true alt=""
src="https://pic1.zhimg.com/80/v2-3717f52544ee146404594e8845e620d9_720w.jpg">

<img  lazyload=true alt=""
src="https://pic2.zhimg.com/80/v2-1d30acf93a82b0b1628432a561d5c523_720w.jpg">

<img  lazyload=true alt=""
src="https://pic2.zhimg.com/80/v2-b1e578b6c917f9536ae06c988ddcac4b_720w.jpg">

<img  lazyload=true alt=""
src="https://pic1.zhimg.com/80/v2-ccb832b49df107e522822f2a83a2b42e_720w.jpg">

<img  lazyload=true alt=""
src="https://pic4.zhimg.com/80/v2-0d57812c2a6978d7666308ead4242209_720w.jpg">




<div id="target">Hello world</div> 
<script>
  let btn=document.getElementById('btn');
  let target=document.getElementById('target');

  function animateScroll(element,speed) {
    let rect=element.getBoundingClientRect();
    console.log("rect",rect)
    // return;
    //获取元素相对窗口的top值，此处应加上窗口本身的偏移
    let top=window.pageYOffset+rect.top;
    let currentTop=0;
    let requestId;
    //采用requestAnimationFrame，平滑动画
    function step(timestamp) {
      currentTop+=speed;
      if(currentTop<=top){
        window.scrollTo(0,currentTop);
        requestId=window.requestAnimationFrame(step);
      }else{
        window.cancelAnimationFrame(requestId);
      }
    }
    window.requestAnimationFrame(step);
  }

  btn.onclick=function (e) {
    animateScroll(target,150);
  };
</script>
</body>
</html>