링크를 클릭하면 페이지 상단으로 이동하는 이유는 무엇입니까?

Question

이것은 내가 지금 링크

<a href="#" class="emails" > Email to Friends </a> 

이있는 페이지가 이상한 질문

소리를 할 수 있습니다 I 이벤트가되도록 앵커 태그에 첨부해야 함 토글 주어진 사업부를 클릭 한 상태에서

자바 스크립트 코드이 이제

$(document).ready(function() { 
    $(".emails").bind("click",function() { 
     $("div#container").toggle 
    }) 
}) 

위의 코드와 그것의 모든처럼 보이는 것은 잘 작동

하지만 여기에 큰 문제가 지금

나는이 변경 사항을 보려면 아래로 모든 방법을 스크롤 할 수

페이지 맨 위로 페이지 이동의 내 초점 주어진 링크를 클릭하면

사람이이 a에 href='#'에서 오는이

Answer 1

href="#"이 빈 앵커이므로이 작업을 수행합니다. 앵커는 페이지 내의 특정 지점에 연결하는 데 사용됩니다. 빈 앵커는 페이지가 맨 위로 돌아가는 결과를 낳습니다.

자바 스크립트에서이를 수정하려면 click 이벤트가 propagating or "bubbling"에서 DOM으로 올라가지 않도록해야합니다. 클릭 이벤트에서 false를 반환하면됩니다.

$(document).ready(function() { 
    $(".emails").bind("click",function() { 
     $("div#container").toggle(); 
     return false; // prevent propagation 
    }) 
}); 

또한 일반적으로 e라는 이름의 인수를 사용하여 바인드의 클릭 핸들러 함수에서 이벤트를 사용할 수 있습니다. 이벤트에 액세스하면 .preventDefault()과 같은 메소드를 호출 할 수 있습니다.

$(document).ready(function() { 
    $(".emails").bind("click", function(event) { 
     $("div#container").toggle(); 
     event.preventDefault(); // this can also go at the start of the method if you prefer 
    }) 
}); 

Answer 2

에 나를 도울 수 있습니다. 이 태그를 제거하십시오. 그러나 기술적으로 더 이상 링크가 아니기 때문에 커서는 텍스트 셀렉터로 기본 설정됩니다. CSS에서 cursor:pointer을 사용하여 재정의 할 수 있습니다. 참고로 왼쪽 메뉴 on this website을 참조하십시오.

Answer 3

사용 : jQuery를 사용하여

<a href="javascript:void(0)" class="emails" > Email to Friends </a> 

또는,

$(document).ready(function() { 
    $(".emails").attr("href","javascript:void(0)"); 
}) 

무효 (0)가을 반환은 .. 잘 .. 그것은 아무것도 반환하지 않습니다. 브라우저는 아무 것도 할 수없는 방법 (즉, href=""을 수행하면 어떻게되는지)과 # (#이 페이지의 맨 위에 있음)을 알고 있지만 void 값으로 이동하는 방법은 알지 못합니다.

속성에 javascript:을 입력 할 때마다 속성 값이 내부 코드의 반환 값으로 설정됩니다. 이 코드는 속성에 처음 액세스 할 때 호출됩니다.

그러나 void(0)은 아무 것도 반환하지 않습니다. 심지어 ""도 아닙니다. 브라우저는 링크가 링크가 아님을 의미합니다.

Answer 4

이렇게하면 앵커가 비어있는 모든 경우를 해결할 수 있습니다.

$(document).ready(function() { 
    $('a').click(function() { 
     $('[href = #]'); 
     return false; 

    }); 
});