window.scrollTo() + ref

window.scrollTo()

• 어떤 페이지에서 위로가기 화살표를 누르면 맨 위로 이동하거나 메뉴에서 어떤 버튼을 누르면 아래로 내려가버리는 버튼을 눌러본 경험이 있을 것이다.
• window.scrollTo()은 스크롤을 움직여주는 window의 내장 함수이다.

---

window.scrollTo() 사용법

• 아래처럼 window.scollTo()의 파라미터로 x, y의 좌표를 직접 넣을 수 있고

...
<button onClick={() => {
    window.scrollTo(0,0);
}}>위로가기</button>
...

• 딕셔너리의 형태로 top, left의 위치를 넣어줄 수도 있다.

...
<button onClick={() => {
    window.scrollTo({top: 0, left: 0});
}}>위로가기</button>
...

• 위와 같이 버튼에 이벤트를 달아서 버튼을 클릭했을 때 맨 위로 이동하게 만들어보자.

import logo from './logo.svg';
import './App.css';
import styled from 'styled-components';

const App = () => {
  return (
    <div>
      <Topbar>맨위</Topbar>
      <Button onClick={() => {
        window.scrollTo(0, 0);
      }}>클릭</Button>
    </div>

  );
}

export default App;

const Topbar = styled.div`
  width: 300px;
  height: 100px;
  background-color: blue;
  font-size: 70px;
`;

const Button = styled.button`
  margin-top: 1500px;
  width: 300px;
  height: 100px;
  font-size: 70px;
`;

• 버튼을 클릭했을 때 부드럽지 않게 갑자기 확 맨위로 이동하는 모습을 볼 수 있다.

---

스크롤 부드럽게 하기

• 만약 스크롤을 부드럽게 하고 싶으면 딕셔너리 형태에 behavior 키 값을 추가한 다음 "smooth"라는 value 값을 주면 된다!

...
<button onClick={() => {
    window.scrollTo({top: 0, left: 0, behavior: "smooth"});
}}>위로가기</button>
...

• 위를 이용해서 버튼을 눌렀을 때 부드럽게 맨 위로 스크롤 하게 만들어보자!

 

---

useRef를 이용해서 스크롤 하기 (개꿀)

• 이동하고 싶은 요소를 ref로 지정한 후에 current.offsetTop 속성을 이용해서 해당 요소로 스크롤 할 수 있다.

import logo from './logo.svg';
import './App.css';
import styled from 'styled-components';
import { useRef } from 'react';

const App = () => {
  const xy = useRef(null);
  return (
    <div>
      <Topbar ref={xy}>맨위</Topbar>
      <Button onClick={() => {
        window.scrollTo({top: xy.current.offsetTop, left: 0,behavior: "smooth"});
      }}>클릭</Button>
    </div>

  );
}

export default App;

const Topbar = styled.div`
  width: 300px;
  height: 100px;
  background-color: blue;
  font-size: 70px;
`;

const Button = styled.button`
  margin-top: 1500px;
  width: 300px;
  height: 100px;
  font-size: 70px;
`;