메뉴 건너뛰기

조회 수 7166 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

* 일반적으로는 a href="#아이디"등과 같이 사용자가 클릭을 해야하는 경우가 있는데, 이러한 경우가 아닌, 자바스크립트로 이동하는 방법을 알아보자. 이러한 경우는 페이지의 bookmark를 등록하거나 할 때 해당 위치로 이동하도록 할 때에 편리할 것이다.


: 먼저 html에 id를 준다.


<div id="bookmark"></div>


: 그리고 해당 element로 이동하고 싶을 때 아래와 같은 자바스크립트를 호출하면 된다.


location.href = "#";
location.href = "#bookmark";

: 이 방법은 아주 쉽게 <a href="#bookmark"> 의 링크/버튼을 누르지 않고 그와 같은 효과를 이끌어낼 수 있다. 하지만 url의 뒤에 #bookmark가 추가되는 불편함(?)이 있을지도 모른다. 사실, url이 그렇게 변하는 것은 미관상(?) 안 좋을수도 있지만, 백스페이스를 누르면 원래의 위치로 가는 것과 즐겨찾기를 하게 되면 해당 위치로 바로 이동이 되는 것이 어떻게 보면 페이지에 따라서는 오히려 UX를 증가시킬 수 있는 면도 있다는 것을 알아두자.


: 만약 이러한 UX적인 이점보다 주소의 미관상(?) 이득이 중요하다면 해당 element의 offset top을 구해서 해당 위치로 이동하는 방법을 사용하면 된다.


function getOffsetTop(el) {
  var top = 0;
  if (el.offsetParent) {
    do {
      top += el.offsetTop;
    } while (el = el.offsetParent);
    return [top];
  }
}
window.scroll(0, getOffsetTop(document.getElementById("bookmark")));


: 스크롤 애니메이션을 넣고 싶은 경우에도 이것을 조금 응용하면 될 것이다. jquery의 스크롤 애니메이션도 결국 이러한 소스가 밑바탕에서 돌아가고 있는 셈이기도 하다.


List of Articles
번호 제목 날짜 조회 수
127 디자이너를 위한 레이어 탭 더 빠르게 만들기 2016.09.11 5340
126 간단하게 우클릭 막는방법 2016.09.11 5946
125 JDK6 (Java SE Development Kit 6)이하 버전 다운로드 주소 file 2016.09.11 6232
124 이클립스 실행할때 자신이 원하는 JDK 지정하는 방법 file 2016.09.11 5520
» 특정 HTML DOM 엘레멘트로 스크롤 이동하기 2016.09.09 7166
122 모바일 홈페이지로 자동 이동하는 방법.... 2016.09.01 6817
121 이동 가능한 레이어팝업 소스 2016.09.01 7287
120 jquery offset()을 이용한 부드러운 스크롤 이동 2016.09.01 7390
119 이벤트 - 페이지 로드 후 이벤트 처리하기 ( window.onload ) file 2015.06.19 10953
118 iframe사용시 높이 자동 조절 2015.06.19 7054
117 [라디오버튼 오류 체크] 간단한 문제 예제 file 2015.06.19 7804
116 자바스크립트 아이디 기억하기 기능 구현 (쿠키저장) file 2015.06.19 11004
115 공백 검사 함수 2015.06.19 15125
114 자바스크립트 API 문서 2015.06.19 9180
113 JSON API - JSON.parse(), JSON.stringify() ( json 형태의 문자열을 JSON객체로 , JSON객체를 문자열로 ) file 2015.06.19 6392
112 창 크기 최대화 시키기 file 2015.06.19 12349
111 예제 - 이미지를 원본 크기로 볼 수 있도록 새창으로 열기 확장 (리사이징 및 이미지 드래그) file 2015.06.19 6875
110 Location 객체 - URL 파싱 - URL에서 전달인자 추출하기 함수 작성 file 2015.06.19 8620
109 창에 대한 정보얻기 (창 크기, 창 위치) file 2015.06.19 7426
108 핸드폰 번호 일부 마스킹크 작업 (정규식 이용) 2015.06.19 10834
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 11 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved