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

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