[CSS 버튼 클릭시 특정위치로 스크롤 이동 !

[CSS / JS ] 버튼 클릭시 특정위치로 스크롤 이동 !

 

window.scrollTo(x, y);

window.scrollTo 함수는 웹 페이지의 스크롤 위치를 지정한 위치로 이동시키는 자바스크립트 함수이다.
이 함수를 사용하면 사용자가 페이지를 스크롤할 때마다 스크롤 위치를 프로그래밍적으로 제어할 수 있다.
 
window.scrollTo(0, 0); 페이지의 최상단으로 스크롤
window.scrollTo(0, 100);  페이지의 세로 스크롤 위치를 100px 아래로 이동.
 
또한 옵션으로 { behavior: 'smooth' }와 같은 객체를 전달해서 부드러운 스크롤 효과를 적용할 수 있음.
 

---

 
 
내가 적용할건 간단히 페이지 상단으로 스크롤을 한번에 이동시키는 동작이다.
 

window.scrollTo({
	top: 0, // 최상단 위치
	behavior: 'smooth' // 부드러운 스크롤
});

top은 세로 방향의 스크롤 위치를 조절하는 속성이다.

top: 0 을 지정하면 페이지의 세로 스크롤 위치를 최상단으로 이동시킨다. 
window.scrollTo(0, 0); 과 같은 동작인데 후자가 좀 더 명시적이긴 하다 

 
이제 이 동작을 함수로 만들어 버튼  클릭 이벤트에 함수를 할당한다

// 스크롤 업 동작 함수
const scrollToTop = () => {
	window.scrollTo({
		top: 0,
		behavior: 'smooth' // 부드러운 스크롤
	});
};

<button onClick={() => scrollToTop()} >
	<Image src={up} alt="up" id="up" />
</button>