메뉴 건너뛰기

조회 수 7075 추천 수 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
번호 제목 날짜 조회 수
187 HTML 화면을 PDF로 출력 file 2019.01.08 5200
186 == / === / != / !== 차이 2018.11.07 1443
185 오늘 날짜 구하기 2018.11.07 1411
184 jQuery 엘리먼트 선택 2018.10.27 1732
183 자바스크립트 urlencode(), urldecode(), rawurlencode(), rawurldecode() 2018.10.27 1911
182 자바스크립트 배열 중복값 다루기 2018.10.27 3898
181 JavaScript 출생년도에 따른 나이 계산 자바스크립트 2018.09.28 3252
180 엔터키 / enter key submit form 2018.09.28 1528
179 팝업창 차단 "허용 메시지" 2018.09.28 1738
178 테이블에서 해당 열의 인덱스 값 얻는 방법 2018.08.29 2784
177 key pressing 누르거나 클릭중인 이벤트 예제 2018.08.29 1616
176 유용한 스크립트 모음 2018.07.24 2291
175 cross site scripting을 막기위한...javascript 2018.07.24 1596
174 다음 우편번호(주소) api 예시 file 2018.07.04 4897
173 스마트에디터(SmartEditor)에서 textarea 유효성 체크하기 2018.07.04 3956
172 반복문 사용할때 태그 식별하기 data-item 2018.07.04 1849
171 SelectBox에서 선택된 항목의 텍스트, 값 가져오기 선택 옵션 넣기. 2018.07.04 4010
170 체크박스(CheckBox) 전체 선택, 전체 해제 checked file 2018.07.04 2904
169 스마트 에디터 (네이버 에디터) 에디터 내에서 이미지 크기 줄이기.(리사이징) file 2018.07.04 2711
168 Javascript selectbox selected 컨트롤 file 2018.06.21 10046
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved