[JaveScript]Scroll 자연스럽게 스크롤 설정하기

클릭하면 해당 장소로 스크롤 이동하기

const btnScrollTo = documnet.querySelector('.btn_scroll_to');

const section1= document.querySelector('#section--1');

btnScrollTo.addEventListener('click',function(e) {
	const s1coords = section1.getBountingClientRect();
	console.log(s1coords);

	console.log(e.target.getBoundingClientRect());

	console.log('Current scroll(X/Y)',window.pageXOffset,pageYOffset);

	console.log(
	'height/width viewport',
	document.documentElement.clientHeight,
	document.documentElement.clientWidth);
);

//예제1
window.scrollTo(s1coords.left,s1coords.top);

//예제2
window.scrollTo(s1coords.left + window.pageXOffset,
	        s1coords.top + window.pageYOffset

//예제3
window.scrollTo({
	left : s1coords.left + window.pageXOffset,
	top : s1coords.top + window.pageYOffset,
	behavior: 'smooth',
);

//실제로 쓸 코드
section1.scrollIntoView({begavior: 'smooth'});
});

예제1,2,3은 연습용

자주 직접해봐여 이해 할 수 있을 것
뷰포트와 현재 스크롤 위치를 확인해보는 연습이 필요하다.

실제로는 scrollIntoView를 쓰면 된다.