javascript 스크롤 페이지 이동 유지하기 .

스크롤 유지 페이지 이동시

1. 현재 페이지에서 스크롤을 감지해서 쿠키로 저장한다.

 

window.addEventListener('scroll', function() {
var scrollHeightPosition = window.scrollY;
setCookie("scroll_position", scrollHeightPosition)
//console.log(scrollHeightPosition);
}); 

 

 

2. 다른 페이지에서 페이지가 불려질때

쿠키로 저장된 높이로 뿌려준다

document.addEventListener("DOMContentLoaded", function(){
var scrollPosition = getCookie("scroll_position"); // 쿠키의 내용을 불러오는 사용자 정의 함수
    if (scrollPosition != "" && scrollPosition != 'undefined') {
        window.scroll(0, scrollPosition); // 또는 body.scrollTop(scrollPosition);
    }
    // 쿠키 내용 초기화
    setCookie("scroll_position", "");

});


3. 쿠키관련함수들.

 

// 쿠키 생성 함수
function setCookie(cName, cValue, cDay){
var expire = new Date();
expire.setDate(expire.getDate() + cDay );
cookies = cName + '=' + escape(cValue) + '; path=/ '; // 한글 깨짐을 막기위해 escape(cValue)를 합니다.
if(typeof cDay != 'undefined') cookies += ';expires=' + expire.toUTCString() + ';';//toGMTString()toUTCString()
document.cookie = cookies;
}




// 쿠키 가져오기 함수
function getCookie(cName) {
cName = cName + '=';
var cookieData = document.cookie;
var start = cookieData.indexOf(cName);
var cValue = '';
if(start != -1){
start += cName.length;
var end = cookieData.indexOf(';', start);
if(end == -1)end = cookieData.length;
cValue = cookieData.substring(start, end);
}
return unescape(cValue);
}

function deleteCookie(name) { document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'; }