Home AboutMe Blog Guest

© 2025 Sejin Cha. All rights reserved.

Built with Next.js, deployed on Vercel

👨‍💻

페이지이동시 스크롤위치 이슈

👨‍💻

페이지이동시 스크롤위치 이슈

현재 셀소리스트에서 디테일 페이지로 넘어갈 때 스크롤 위치가 같이 연동되어 디테일 페이지의 아랫부분 부터 보이는 현상 발생

1.셀소 클릭 시, 상단 내용부터 나오도록

2.셀소 detail view 클릭 후, 뒤로가기 했을 때 원래의 스크롤 위치에 오도록

문제(사진)

notion image

notion image

해결방법

참고사이트

React-Router에 scroll restoration 적용하기

이번에 프로젝트를 진행하며 만들어본 약간 임시 방편일 수 있는 scroll restoration 기능을 글로 남겨봅니다. 이번 프로젝트에서 글 리스트가 있고, 리스트 중 하나를 클릭하면 글 페이지로 넘어가는 일반적인 웹 사이트를 만들고 있었다. 그런데 페이지를 클릭하고 뒤로 가기를 눌렀을 때 이전 scroll 위치로 돌아가지 않는 문제를 겪었다.

React-Router에 scroll restoration 적용하기

https://godsenal.com/posts/React-router%EC%99%80-scroll-restoration-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0/

React-Router에 scroll restoration 적용하기

→ push 할 때는 가장 위로 뒤로가기 시는 기존 스크롤 위치를 저장한 후 복기하는 방법을 이용

React 페이지 전환 시 스크롤 복원

Computer Science/React, React Native React Router의 Link을 사용해서 페이지를 이동했을 때 SPA이다 보니까 스크롤이 이전 페이지에서 중간에 멈췄으면 중간에서 시작하는 점의 문제가 있었다. 아무래도 유저의 입장에서는 스크롤이 위에서 시작했을 때 위로 올릴 필요가 없으니까 편하다. 친절하게도 React Router는 이 점에 대해서 제공하고 있었다. https://reacttraining.com/react-router/web/guides/scroll-restoration 16.8 릴리즈 이후 훅스 사용을 권장하여 훅스의 예제도 있어 hooks로 적용을 해보았다.

React 페이지 전환 시 스크롤 복원

https://jeongw00.tistory.com/193

React 페이지 전환 시 스크롤 복원

해결 완료

window.scrollTo(0,0)

함수를 history.push 다음에 넣어주므로 해결

Created

Dec 18, 2019 04:00 PM

문제 (요약)

해결방안 (요약)

Tags

Complete

담당

인수

Align

State


<Card
 onClick={() => {
            setSelectedUser(user);
            history.push(url);
						window.scrollTo(0,0);
          }}
        >