2009-12-28 7 views
1

내 페이지에서 일부 JavaScript를 실행하고 있습니다. 앵커 <a> 요소에 첨부 된 이벤트를 잡아서 (jQuery를 사용하여 첨부 한) 핸들러를 실행할 때마다 스크롤 위치가 다시 페이지 상단으로 재설정됩니다. 해결책이 있습니까?왜 내 jQuery 이벤트 핸들러를 실행하면 페이지가 맨 위로 스크롤됩니까?

+2

. 관련 코드를 보여줄 수 있습니까? – watain

+1

"이벤트를 잡아서 실행"한다는 것은 무엇을 의미합니까? – SLaks

+0

@SLaks : 분명해야합니다. 이벤트가 캡처되어 요약 살해됩니다. EVENT MURDERER !!! – Shog9

답변

6

href 속성을 #으로 남겨두면 <a> 태그에서 클릭이 처리되는 동안 언급 한 스크롤이 발생합니다. 브라우저가 이벤트 체인의 끝에 기본 동작

당신이 에있는이 클릭 이벤트의을 처리하는 브라우저의 기본을 방지 해결하기 위해 (이 때문에 너무 event bubbling 전화의 발생) 실행하기 때문이다 이것은 다른 방법으로 수행 할 수 있습니다

  • 이 이벤트 핸들러 함수에서 href='javascript:void(0)'
  • 반환 falsehref='#'를 교체합니다.
  • 사용 jQuery의 preventDefault 방법
+4

인라인 자바 스크립트는 대개 무슨 일이 있어도 눈살을 찌푸리게되므로 바인드 된 함수 내에서'return false; '를 수행하는 것이 좋습니다. 그래도 괜찮습니다. –

+0

@pablo : 너는 천재 야. – amit

+0

이벤트를 캡처하고 preventDefault를 사용하여 이렇게 할 수도 있습니다. $ ("a"). (function (event) { event.preventDefault(); }); – spelley

0

서버에 다시 게시 할 때마다 페이지가 맨 위로 스크롤된다는 것을 의미한다고 가정합니다.
이것이 의미하는 바가 아니라면 명확히하십시오.

이 문제를 해결하려면 자바 스크립트를 사용하여 다시 게시와 함께 $(window).scrollTop()을 보낸 다음 더 많은 자바 스크립트를 방출하는 서버 측 코드를 작성하여 매개 변수가있는 경우 다시 스크롤하십시오.

더 구체적인 해결 방법을 원하면 자세한 내용을 제공하십시오.

5

이유 중 하나는 "#"을 가리키는하는 링크를 가지고 있고, 당신이 그 링크에 바인딩 이벤트를 가지고있을 수 있습니다. 이 솔루션은 이벤트 함수의 끝에서 return false;을하는 것입니다 :

<a href="#" id="foo">Test</a> 

그리고 jQuery를에이 아무 이유없이 발생하지 않습니다

$('#foo').click(function() { 
    /* do stuff */ 
    return false; 
}); 
+0

정말 고마워요. – amit

관련 문제