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

推荐阅读更多精彩内容