SCRIPT 클릭 시 최상단 이동 막기 - 자바스크립트 링크 때 맨 위로 이동하는 것 막기
페이지 정보
조회 743회 작성일 22-10-17 09:57
본문
클릭 시 최상단 이동 막기
자바스크립트 링크 때 맨 위로 올라가는 것 막기
javascript나 jQuery를 사용한 링크를 만들었을 때, 이것을 클릭하면 갑자기 최상단으로 이동하는 현상이 발생하곤 한다.
근본적인 문제는 href="#"이다. 이것이 자바스크립트 링크 클릭 때 맨 위로 올라가는 원인이다. 그 대책을 알아보자.
클릭 시 최상단 이동 막기 - 자바스크립트 링크 때 맨 위로 이동하는 것 막기
href 최상단 이동의 원인
가장 대표적인 클릭 시 최상단 이동 원인은 이런 코드 때문이다.
[code]
<a href="#" onclick="window.open('주소');">클릭</a>
[/code]
여기서 onclick="window.open('주소');가 새 창을 띄우면서 링크를 여는 코드인데, 문제는 그 앞에 있는 href="#" 부분이다.
이 #는 의미 없는 링크를 만드는 코드다. 일반적으로 링크는 화면 페이지가 이동하는 것이다. 그런데 이것을 붙여넣으면 새로 페이징 되지 않는다. 대신 실질적인 링크 이동은 그 다음에 오는 onclick="window.open('주소');가 담당하는 것이다.
그런데 문제는 이것이 페이지 안에 머물도록 하는 것이기 때문에 그 페이지의 맨 위부터 보여주는 것에 있다. 이럴 때는 아래처럼 여러 가지 방법으로 해 주는 것이 좋다.
맨 위로 올라가는 것 막기 1
가장 좋은 방법은 자바스크립트로 이를 막아 주는 것이다. 사용법도 간단하다. 마지막에 한 줄만 넣어주면 된다.
[code]
<a href="#" onclick="window.open('주소'); return false;">클릭</a>
[/code]
위의 링크 소스를 보면 마지막에 return false;라는 것이 더 생긴 것이 보일 것이다. 링크로 새 창을 열 때 원래 페이지의 위치를 초기화하지 말라는 의미다.
자바스크립트 링크 최상단 이동 막기 2
또 다른 방법으로도 막을 수는 있다. 예를 들어, href="#" 부분을 아래처럼 바꿔보는 것이다.
[code]
<a href="#none" onclick="window.open('주소');">클릭</a>
[/code]
href 코드에서 #대신 #none를 사용하는 방법도 있다. 원래 #none 같은 형식은 특정 위치로 보내는 코드다. 예를 들면, #input1 같은 형식으로 이동할 수 있다. 대신, #none를 사용하여 이동 위치가 없다는 형식으로 사용할 수도 있다.
(참고: <a href="/a.html#a1">링크</a>는 a.html로 이동 후 id가 a1인 곳으로 이동하게 된다.)
[code]
<a href="#;" onclick="window.open('주소');">클릭</a>
[/code]
물론 맨 위로 이동하고 싶다면 그냥 href="#"를 하면 된다. 간단히 하고 싶다면 마지막에 ; 를 붙여서 #; 라고도 해 볼 만하다.
[code]
<a href="javascript:;" onclick="window.open('주소');">클릭</a>
[/code]
# 링크 때문에 최상단 이동을 하게 되면 URL 주소창에 #가 붙어서 보인다. 이것을 안 보이게 할 때 사용하는 것이 javascript:이다. 그러니까, 맨 위라는 것이 떨어져 나가게 할 수도 있다.
클릭 시 최상단 이동 막기 3
위에서 여러 가지 링크 위치 이동 막기 코드를 설명했지만, 링크가 많을 때는 하나하나 다 걸어주기가 귀찮을 수도 있다.
이럴 때, 페이지 전체에 상단 이동 금지를 걸어주려면 아래처럼 한꺼번에 막아줘야 한다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
[code]
<script language="Javascript">
<!--
function click() {
return;
}
//-->
</script>
[/code]
HEAD 태그 부분에 이 스크립트를 넣어줘도 같은 효과를 볼 수 있다. 이것은 위에서 본 return false;와 같은 역할을 하는 것이다.
[code]
<script language="Javascript">
<!--
$('a.feellink').click(function(e)
{
e.preventDefault();
});
//-->
</script>
[/code]
또는 위처럼 해 볼 수도 있겠다. 이미 공개 오픈된 함수 코드인데, 코드가 길어지기 때문에 사용하지 않으려는 사람도 많다.