[JS] 스크립트로 앵커위치 이동하기

아시다시피, HTML에는 페이지 내의 요소들을 이동할 수 있는 방법이 있습니다.
[code type=html]<a xhref="http://mygony.com/#somePosition" mce_href="http://mygony.com/#somePosition" >Move</a>
...
...
<a name="somePosition"></a>
<a xhref="http://mygony.com/#top" mce_href="http://mygony.com/#top" >move to top</a>[/code]
위와 같이 하면 아무 것도 변하지 않고, HTML내에서 위치를 이동할 수 있습니다. 그런데 문제가 있습니다. 딱 한가지 변하는 곳이 있는데 그게 바로 주소 표시줄입니다.

무언가 붙었습니다

위에서 보시는 바와 같이, 주소 뒤에 #somePosition 이라는 위치가 붙어서 표시됩니다.
사실, 전혀 신경쓰지 않아도 될 문제입니다만 그게 보기 싫다고 하는 어떤 병적인 아저씨 얘기를 아시는 분으로부터 전해들었습니다. 그 분이 저에게 방법을 문의하길래 살짜쿵 꼼수를 알려드렸는데, "이런걸 한번 만들어서 홈페이지에 올려놓으면 어떨까요?"라고 아주아주 정중하게 협박하시더라구요. -ㅂ-;;뭐... 꼭 비혼님이라고 밝히진 않겠지만, 여하간 그런일이 있어서 만들게 되었습니다.
원래는 그저께 여권사진을 찍고 와서 만들려했다가 친한 동생의 위로, 인터넷 단절, 준비했던 시험에의 좌절 등의 여러 일이 겹치면서(아... 여권사진도 맘에 안들었습니다), 좀 늦었군요(목숨만 살려주세요 덜덜덜)

자... 일단 소스 나갑니다.
[code type=js]// Move Anchor by gony (http://mygony.com)
function moveA(Name)
{
....var objs = document.getElementsByName(Name);

....if (Name == "" || Name == "top") document.body.scrollTop = 0;
....if (objs == null || objs.length == 0) return false;
....if (typeof moveA.obj == "undefined") {
........moveA.obj = document.createElement("A");
........moveA.obj.href="http://mygony.com/#" mce_href="http://mygony.com/#" ;
........document.body.appendChild(moveA.obj);
....}

....// focus on the bottom of the page
....moveA.obj.style.display = "";
....moveA.obj.focus();
....moveA.obj.style.display = "none";

....if (objs[0].tagName.toLowerCase() == "a") { // for IE
........var ref = objs[0].href;
........objs[0].href="http://mygony.com/#" mce_href="http://mygony.com/#" ;
........objs[0].focus();
........if (ref == "") objs[0].removeAttribute("href");
........else objs[0].href = ref;
....} else {
........objs[0].focus();
....}
....objs[0].blur();

....return false;
}[/code]

스크립트 파일을 아무렇게나 삽입하시고, 제일 위에 있던 예제를 다음과 같이 바꾸어 봅니다.
<a onclick="moveA('somePosition')">Move</a>
...
...
<a name="somePosition"></a>
<a onclick="moveA('top')">move to top</a>

끝입니다. -_-;;
제가 만드는 스크립트는 설명이 짧은게 특징입니다(설명글 쓰기 싫어서 더 간단하게 만들려고 삽질한다는 소문이 돌기도....).

간단한 예제 파일을 첨부했으니 다운받아 실행시켜보아도 될 것 같습니다.

[download]http://mygony.com;/wp-content/uploads/2006/01/599537.html;클릭하십셔~[/download]

  1. #anchor도 URI의 일부분으로 문서의 위치를 말해주는 사용자에게는 아주 중요한 정보 입니다. 이와 같이 #anchor를 나타내주지 않으면 사용자 접근성이 떨어지게 됩니다.

    링크에 생기는 쩜선 보기 싫다고 해서 어떠한 엘리먼트도 포커싱 안되게 만드는 것 같이 보이는 것에만 집중한 나머지 접근성이 떨어지게 되면 안됩니다.

    보기 싫다는 사람이 있으면 그것이 의미하는 것을 알려주고 올바르게 사용할 수 있도록 유도 해야 한다고 생각합니다.

  2. 어처구니없는 질문에 황당해하면서도 왜 그래야 하는지 이유 물어보고, anchor 쓰임새 이야기해줬는데도 "요청"대로 해야 한다니 꽁수로라도 해결책(여러 방법들 중의 하나겠지요)을 제시해줄 수 밖에요~.
    많이 답답한 중국입니다. -_-);

Leave a Reply to 신현석Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.