[2022.07.17] 클릭시 특정 dom으로 스크롤 이동

history.jsx

 

오류1: 클릭시 해당 dom에 각각 이동되어야 하는데 기준점이 없어 오류가 남.

해결: ref를 해당 index로 지정

const refs = React.useRef([]);

const handleClick = (i) => {
	refs.current[i].scrollIntoView({ behavior: 'smooth' }); //smooth:부드럽게 효과
};
  
  
  ...
  
  <ul className="ztHisTitle">
    <li className='ztHisTitleOr'>제타플랜의 시작으로<br/> 한국 기업 컨설팅의</li>
    <li className='ztHisTitleLi' onClick={() => handleClick(0)}>미래를 시작하다.</li>
    <li className='ztHisTitleLi' onClick={() => handleClick(1)}>미래를 시작하다.</li>
    <li className='ztHisTitleLi' onClick={() => handleClick(2)}>무한발전을 하다.</li>
    <li className='ztHisTitleLi' onClick={() => handleClick(3)}>기반을 다지다.</li>
  </ul>
 
 ....
{
ztHisLists.map(function(titleDt,i){
  return(
    <div className='ztHisTxtsBoxs' key={titleDt.title}  ref={(ref) => (refs.current[i] = ref)}>
......

 

참고사이트1

참고사이트2