현재 jTemplates를 사용하여 클라이언트에서 비교적 큰 테이블을 만들면 각 행에 jQuery UI 대화 상자를 여는 버튼이 있습니다. 그러나 페이지 아래로 스크롤하여 해당 버튼 중 하나를 클릭하면 jQuery 대화 상자가 열리지 만 스크롤 위치가 사라지고 페이지가 맨 위로 이동합니다 (블로킹 및 실제 대화 상자가 화면에 표시됨). 아무도이 문제를 일으킬 수있는 것을 보거나 알고 있습니까?jQuery UI 대화 상자가 나타나면 페이지 상단으로 스크롤하는 것을 어떻게 방지합니까?
감사합니다.
대화 상자를 팝업하는 "버튼"을 구현하기 위해 앵커 태그를 사용하고 있습니까? 그렇다면, 앵커 태그의 기본 동작이 호출되지 않도록 대화 상자를 여는 클릭 핸들러가 false를 반환하도록합니다. 버튼을 사용하는 경우 핸들러에서 false를 반환하여 제출하지 않고 페이지를 완전히 새로 고침해야합니다. 예를 들어
,$('a.closeButton').click(function() {
$('#dialog').dialog('open');
return false;
});
<a class='closeButton'>Close</a>
angularjs를 사용하고 몇 가지를 낭비한 후에도 동일한 문제가있었습니다. 시간에 [ng-click] (http://docs.angularjs.org/api/ng.directive:ngClick)을 사용할 때 href 속성을 피해야한다는 사실을 알게되었습니다. – Ritesh
@Ritesh 어쨌든 여기에는 그럴 필요가 없습니다. 나는 제거했다. – tvanfosson
확인. href 속성을 제거하면 마우스 커서가 나타나지 않고 어떤 스타일링을해야 할 수도 있습니다. 각도를 자동으로 처리하는 각도계의 경우에는 문제가되지 않습니다. – Ritesh
변경이
$('a.closeButton').click(function(e) {
e.preventDefault();
$('#dialog').dialog('open');
});
나는 아약스를 통해 콘텐츠를로드하는 데이를 사용하고 같은 문제가 발생했습니다. 페이지를 아래로 스크롤하여 대화 상자를 연 다음 페이지를 닫으면 페이지가 맨 위로 이동했습니다. scrollTo 플러그인이 필자가 필요로하는 것보다 더 복잡했다. –
Spot on! 그것은 링크로 defaulting이었다! –
같은 코드는 당신이 시도 할 수 :
scrollTo(0, jQuery("body"));
당신의 버튼을 대체 href="#"과 HTML 앵커 태그로 작업하는 경우 href와 같이 예를 들어 href="javascript:;" 또는 href. 스크롤이 발생하는 이유는 href="#"이 페이지 상단으로 스크롤되기 때문입니다.
이것이 내 문제였습니다. 사실 href 만 삭제했습니다. 감사! –
전에 본 적이 있지만 다음 플러그인을 사용하여 스크롤 위치가 http://plugins.jquery.com/project/ScrollTo가 손실되지 않도록했습니다. –