:: 글답변 :: 이 름 패스워드 이메일 홈페이지 옵 션 html  분 류 선택하세요 Html CSS Script JQuery ASP PHP GNU .NET MySQL MsSQL DNS SEO ENG IONIC REACT 제 목 > > > * 일반적으로는 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의 스크롤 애니메이션도 결국 이러한 소스가 밑바탕에서 돌아가고 있는 셈이기도 하다. > 링크 #1 링크 #2 파일첨부   왼쪽의 글자를 입력하세요.