jquery click on anchor 요소 힘을 맨 위로 스크롤하시겠습니까?

jquery click on anchor 요소 힘을 맨 위로 스크롤하시겠습니까?

jQuery 하이퍼링크 - href 값?텍스트][1]

앵커 요소에 첨부된 jquery와 클릭 이벤트를 사용하여 문제가 발생했습니다.: jQuery 하이퍼링크 - href 값?"이" SO 질문은 중복된 것 같고, 수락된 답변은 문제를 해결하지 못하는 것 같습니다.만약 이것이 나쁜 SO 에티켓이라면 죄송합니다.

.ready() 함수에는 다음이 있습니다.

jQuery("#id_of_anchor").click(function(event) { //start function when any update link is clicked
        Function_that_does_ajax();
        });

그리고 내 닻은 다음과 같습니다.

<a href="#" id="id_of_anchor"> link text </a> 

그러나 링크를 클릭하면 원하는 대로 Ajax 기능이 수행되지만 브라우저는 페이지 맨 위로 스크롤됩니다.좋지 않습니다.

다음을 추가해 보았습니다.

event.preventDefault(); 

아약스를 하는 내 함수를 호출하기 전에, 하지만 그것은 도움이 되지 않습니다.제가 무엇을 빠뜨리고 있나요?

명확화

나는 모든 조합을 사용했습니다.

return false;
event.preventDefault(); 
event.stopPropagation();

js ajax 함수 호출 전후.그것은 여전히 맨 위로 스크롤됩니다.

그게 효과가 있을 텐데, "이전"이 무슨 뜻인지 명확하게 말씀해 주시겠어요?당신 이 일을 할 건가요?

jQuery("#id_of_anchor").click(function(event) {
    event.preventDefault();
    Function_that_does_ajax();
});

왜냐하면 그것이 작동하지 않는다면 당신이 뭔가 잘못하고 있고 우리는 더 많은 코드를 볼 필요가 있다는 의미에서 작동해야 하기 때문입니다.그러나 완전성을 위해 다음을 시도할 수도 있습니다.

jQuery("#id_of_anchor").click(function() {
    Function_that_does_ajax();
    return false;
});

편집

여기 이 작업의 예가 있습니다.

두 링크는 다음 코드를 사용합니다.

$('#test').click(function(event) {
    event.preventDefault();
    $(this).html('and I didnt scroll to the top!');
});

$('#test2').click(function(event) {
    $(this).html('and I didnt scroll to the top!');
    return false;
});

보시다시피 잘 작동하고 있습니다.

href 속성에서 javascript:java(0);를 사용할 수 있습니다.

틸랄이 위에서 말했듯이:

<a id="id_of_anchor" href="javascript:void(0)" />

앵커 태그를 오른쪽으로 유지하고 Javascript로 클릭 핸들러를 할당할 수 있으며 스크롤되지 않습니다.우리는 단지 이러한 이유로 그것을 광범위하게 사용합니다.

이 질문은 jQueryEvent 개체의 올바른 기능을 사용하고 있다고 명시되어 있으므로 디버깅 연습에 더 가깝습니다.

jQuery 이벤트 처리기에서 다음 두 가지 기본 작업 중 하나 또는 둘 다 수행할 수 있습니다.

요소의 기본 동작을 방지합니다(이 경우 AHREF="#").

jQuery("#id_of_anchor").click(function(evt) { 
  // ...
  evt.preventDefault(); // assuming your handler has "evt" as the first parameter
  return false;
}

이벤트가 주변 HTML 요소의 이벤트 핸들러로 전파되는 것을 중지합니다.

jQuery("#id_of_anchor").click(function(evt) { 
  // ...
  evt.stopPropagation(); // assuming your handler has "evt" as the first parameter
}

예상되는 동작을 얻지 못했기 때문에 Ajax 호출을 일시적으로 제거하고 폼 값을 설정하거나 -shudder-alert("OK")와 같은 무해한 코드로 교체한 후에도 위로 스크롤하는지 테스트해야 합니다.

$("#id_of_anchor").click(function(event) { 
  // ...
  return false;
}

그냥 지다

href="#"

html 태그에서...그것이 웹 페이지를 "업그레이드"하게 만드는 원인입니다.

<a id="id_of_anchor"> link text </a>

그리고 덧붙이는 것을 기억하세요.

cursor: pointer;

마우스 오버 링크처럼 보이도록 a의 css에 연결합니다.

행운을 빌어요.

저도 같은 문제를 겪고 있습니다.

요소를 DOM에 추가하기 전에 이벤트를 바인딩할 때 발생하는 것 같습니다.

아래 코드에 많은 도움이 되었습니다.감사해요!

        $(document).ready(function() {
        $(".dropdown dt a").click(function(event) {
        event.preventDefault();
            $(".dropdown dd ul").toggle('slow');
        });           
        $(".dropdown dd ul li a").click(function(event) {
        event.preventDefault();
            $(".dropdown dd ul").hide();
        });
    });

언급URL : https://stackoverflow.com/questions/1061580/jquery-click-on-anchor-element-forces-scroll-to-top