js实现页面滑动到某一个区域

业务场景：

当用户点击【开始学习】按钮时，页面定位到【我的课程】模块，实现方法【getBoundingClientRect+scrollTop】

 getBoundingClientRect方法返回元素的大小及其相对于视口的位置，即元素的width,height,top,right,bottom,left

 因此要想页面定位到【我的课程】模块，只需要要将页面滑动到getBoundingClientRect().top+scrollTop的位置即可，因为getBoundingClientRect方法只是返回的元素距离视口的top值，因此当【我的课程】元素划出视口时，那么getBoundingClientRect().top的值就会变为负数，此时加上你页面滚动的距离scrollTop，就是【我的课程】模块距离整个页面顶部的距离。

实现代码如下：

scrollToEle(eleId) {
  const ele = document.querySelector(`#${eleId}`)
  //  元素距离视口顶部的距离
  const eleTop = ele.getBoundingClientRect().top
  //  页面滚动的距离
  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
  // window.scrollTo(0, eleTop+scrollTop)
  window.scrollTo({
    left: 0,
    topL: eleTop+scrollTop,
    behavior: 'smooth', //  三个值'smooth','instant',默认值auto
  })
}