JS实现平滑滚动到指定元素

项目中经常会遇到触发事件页面自动滚动到某一位置的情况，一般可以用游标实现，但也有另一种简单的实现思路，利用element.getBoundingClientRect()和window.scrollTo()

由于是JS控制滚动条，所以我们可以轻松添加动画效果，代码如下

  function animateScroll(element,speed) {
    let rect=element.getBoundingClientRect();
    //获取元素相对窗口的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);
  }

JSBin Demo