背景：

工作中，经常会遇到页面一进来，让页面滚动到指定位置处，为了提高用户体验用的。

1、如果想要页面直接滚动到顶，可直接采用：

window.scrollTo(x,y);

2、如果想让某个dom元素滚动到指定位置：

requestAnimationFrame的作用就是告诉浏览器在下次重绘之前执行传入的回调函数，这个行为是浏览器自动帮你做的。于是有了如下代码:

const scrollToTop = () => {
    let sTop = document.documentElement.scrollTop || document.body.scrollTop
    if (sTop > 0) {
        window.requestAnimationFrame(scrollToTop)
        window.scrollTop(0, sTop - sTop / 8)
    }
}

3、获取某Dom元素距离可视窗口顶部的距离

元素在网页里的坐标-页面滚动的距离
获取元素距离可视窗口顶部的距离 = dom.ofisetTop - window.pageYOffset;
元素自身的高度：dom.offsetHelght;

4、页面滚动

const dom = document.getElementByld(`${id}`)
window.scrollTo({
  top: dom.offsetTop, //需要滚动的距离
  behavior: 'smooth',
})

react监听鼠标滚轮事件 -> 锚点按钮状态
const handleScroll = (e)=>{ }
componentDidMount(){
  //监听火狐鼠标滚动事件
  document.addEventListener("DOMMouseScrol", handleScroll, false);
  //监听谷歌苹果浏览器滚动事件
  document.addEventListener("mousewheel", handleScroll, false);
}
componentWillUnmount(){
 document.removeEventListener("DOMMouseScroll", handleScroll);
 document.removeEventListener("mousewheel", handleScroll);
}

5、 判断 某个元素是否滚动到某个位置范围时，才显示数据。

const [show, setShow] = useState(false)
 
const judgeDistanceTop =()=> {
 let dom= document.getElementById('home_content_statistic');
 if (anchorElement) {
  // 判断元素距离顶部的滚动距离范围。
  const scrollDistance = dom.offsetTop - window.pageYoffset;
  if (scrollDistance > -100 && scrollDistance <= 460) {
    setShow(true);
  }
 }
}
/**
* 模拟鼠标滚轮事件触发
*/
useEffect(()=> {
  const timer = setInterval(()=>{ judgeDistanceTop()}, 100)
  return ()=>{
    clearInterval(timer)
  }
}, [])

参考： blog.csdn.net/qq_38719039… segmentfault.com/a/119000001…