[JS/JavaScript] 자바스크립트로 페이지 이동 시 스크롤 위치 조절하기

옵션을 선택하면 해당 값을 가지고 페이지를 리로드하는 페이지를 구축했으나 옵션 선택한 스크롤이 아닌 맨위로 가지는 불편함이 있었다. 이를 해결하는 방법으론 가장 이상적인 것은 AJAX를 이용하는 것이지만 처음 설계를 잘못하여 납품 기한에 걸려 힘든 상황이 되었다.
여건이 된다면 AJAX로 아예 새로고침 되야하는 부분만 바뀌게 하면 더 사용자가 만족하는 페이지를 구축할 수 있지만
여건이 안되었기 때문에 옵션 선택 시 페이지를 이동하되 스크롤 위치를 옵션 선택 당시의 위치로 만들어주게끔 기능을 넣었다.  

먼저 사용할 JS 기능은
window.scrollY 를 통해 스크롤 위치를 기억하고

window.scrollTo(x,y) 를 통해 이동시킬 예정이다.

해당 스크롤 위치를 기억하기 위해 sessionStorege를 사용할 것이다.
이유는 만료 기한이 해당 브라우저 탭이 닫힐때 까지라 가장 이상적인 것 같았다.

$(function scrollFn(){
	let scrollFnYN = sessionStorege.getItem('scrollFnYN')
    if(scrollFnYN == 'Y'){
    	let scrollY = sessionStorege.getItem('scrollY')
		window.scrollTo(0,scrollY) // 가로스크롤 사용 X
    }
})


function saveScroll(){
	sessionStorege.setItem('scrollFnYN','Y')
	sessionStorege.setItem('scrollY',window.scrollY)
}

해당 코드를 이용하면 쉽게 사용이 가능 할 것이다.

별도로 jsp를 통해 컨트롤로 input값을 보내서 사용하는 방법도 있으나 js로만 구현을 해보고 싶어 이렇게 구현을 했다.