• 회원가입
  • 로그인
  • 구글아이디로 로그인

[js] JS - 이전페이지로 이동 시 기존 스크롤위치로 이동 (JavaScript vs. jQuery 코드 비교)

이전페이지로 이동 시 기존 스크롤위치로 이동

[순수 JavaScript 경우]

 

window.onload = function() {

  // 스크롤 위치를 가져와서 설정.

  var scrollPos = localStorage.getItem('scrollPos');

  if (scrollPos) {

    window.scrollTo(0, scrollPos);

    localStorage.removeItem('scrollPos');

  }


  // 스크롤 위치가 변경될 때마다 localStorage에 저장.

  window.onscroll = function() {

    localStorage.setItem('scrollPos', window.pageYOffset || document.documentElement.scrollTop);

  };

};

 


[jQuery 경우]

 

$(document).ready(function() {

    // 스크롤 위치를 가져와서 설정.

    var scrollPos = localStorage.getItem('scrollPos');

    if (scrollPos) {

      $(window).scrollTop(scrollPos);

      localStorage.removeItem('scrollPos');

    }


    // 스크롤 위치가 변경될 때마다 localStorage에 저장.

    $(window).scroll(function() {

      localStorage.setItem('scrollPos', $(window).scrollTop());

    });

});

 

PS1. 위 소스를 <head> 태그 안에 추가.

PS2. 무한 게시판에서만 사용: <?php if($bo_table == '무한게시판ID') {?>위 소스<?php } ?>

PS3. 크롬 경우, 위 코드 불필요. 브라우저 자체적으로 지원됨.


분류 제목
Math JS - Math.log1p() 메서드 -
Math JS - Math.expm1() 메서드 -
Math JS - Math.clz32() 메서드 - 32비트 이진수에서 앞에 오는 0 개수 반환 (= Math.clz…
Math JS - Math.fround() 메서드 - 최근접 32비트 단정밀도 부동소수 반환 (= Math.froun…
Math JS - Math.sign() 메서드 - 숫자부호판별 (= Math.sign메서드 = 매스사인메서드) ※ 숫…
js JS - 모든 링크 주소를 특정 URL주소로 일괄 변경
js JS - 화면 리사이즈 시, 스크롤바 가운데로 이동 (= 화면크기 변경 시, 스크롤바 중앙에 위치시키기)
API_Fetch JS - Fetch API (= JavaScript로 파일 내용 가져오기 = fetch메서드=페치메서드)
API_MediaQueryList JS - window.MediaQueryList 객체 - 미디어쿼리 정보 저장 (= window.MediaQ…
Basic JS - 반복문 종류 ( for / for...of / for...in / while / do...while…
DOM_Element JS - remove() 메서드 - 요소 제거 (= remove메서드 = 리무브메서드) ※ 요소제거
Window_Object JS - window.jQuery 속성 - 제이쿼리 라이브러리 로드 여부 확인 (= 윈도우제이쿼리속성)
js JS - 특정 문자열 글자 포함 요소의 글자색 스타일 변경
67/67
목록
찾아주셔서 감사합니다. Since 2012