특정 HTML DOM 엘레멘트로 스크롤 이동하기

by 조쉬 posted Sep 09, 2016
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

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

* 일반적으로는 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의 스크롤 애니메이션도 결국 이러한 소스가 밑바탕에서 돌아가고 있는 셈이기도 하다.


Articles

2 3 4 5 6 7 8 9 10 11