앵커 요소를 jquery에서 클릭하면 강제로 맨 위로 스크롤되나요?

StackOverflow https://stackoverflow.com/questions/1061580

문제

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

jquery와 앵커 요소에 연결된 클릭 이벤트를 사용하는 데 문제가 발생했습니다.[1]: 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();

Ajax를 수행하는 함수를 호출하기 전에 시도했지만 도움이 되지 않았습니다.내가 무엇을 놓치고 있나요?

설명

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

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;
});

그리고 당신이 볼 수 있듯이 그들은 잘 작동하고 있습니다.

다른 팁

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

Tilal이 위에서 말했듯이 :

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

앵커 태그를 올바르게 유지하고 JavaScript로 클릭 핸들러를 할당 할 수 있으며 스크롤하지 않습니다. 우리는 이런 이유로 그것을 광범위하게 사용합니다.

이 질문은 당신이 당신이 jQuery 이벤트 객체.

jQuery 이벤트 핸들러에서는 두 가지 기본 작업을 수행 할 수 있습니다.

1. 요소의 기본 동작을 방지합니다 (귀하의 경우 href = "#") :

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

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

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

예상되는 동작을 얻지 못하므로 Ajax 호출을 일시적으로 꺼내거나 양식 값을 설정하거나 -shudder-와 같은 무해한 코드로 교체해야합니다. 경고 ( "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();
        });
    });
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top