React中使用锚点链接以及滚动条相关操作

本文链接：https://blog.csdn.net/weixin_43088792/article/details/128087535

锚点链接

标题一种很新的锚点链接方式(起码对于我来说是很新的，今天刚发现这种形式)

  //  获取要链接的锚点的dom
  let anchorElement = document.getElementById(anchorName);
  //  划过去
  anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'});

scrollIntoView 参数详解：MDN
最后实现的效果

1669642015648963

鼠标滚动到对应菜单，对应菜单变为选中状态（监听滚动事件）

import React,{useState} from 'react';
const [flage,setFlage] = useState(0)
export default function Globo(){
  window.addEventListener('scroll',()=>{
      let part1 = document.getElementById('part1' ).getBoundingClientRect();
      let part2 = document.getElementById('part2' ).getBoundingClientRect();
      let part3 = document.getElementById('part3' ).getBoundingClientRect();
      let part4 = document.getElementById('part4' ).getBoundingClientRect();
           if ( part1.top === 0 ) {
               setFlage(0)
           }else if ( part2.top <=25 &&  part2.top >= 1  ) {
               setFlage(1)
           }else if ( part3.top <=40 &&  part3.top >= 10 ) {
               setFlage(2)
           }else if ( part4.top <= 50 && part4.top >= 20 ) {
               setFlage(3)
           }
    })
}