jQuery 중지 새로로드 된 컨텐츠로 점프

특정 사용자 작업시 div가 대체됩니다. 이러한 작업은 교체중인 div 아래에서 수행되며 div가 너무 커서 밑으로 변경하는 데 사용되는 버튼과 함께보기 창에 완전히 들어 가지 않는 경우 브라우저가 새로로드 된 페이지의 맨 위로 이동합니다 div. 어느 것이 성가시다.jQuery 중지 새로로드 된 컨텐츠로 점프

누구나이를 막을 방법을 알고 있습니까? 건배.

다음은 jQuery 코드입니다. ChartContent는 덧붙여 나는 그것이 그와 관련된 생각하지 않도록이 기본 동작의 수행에서 버튼을 예방할 HTML

function UpdateChartImage(ChartContent) { 
//do updates on div here 
    var existingChart = $("#" + $(ChartContent).attr("id")); 
    existingChart.fadeOut("fast", function() { existingChart.replaceWith(ChartContent); }).fadeIn("fast"); 
}

의 작은 덩어리이다.

출처

2009-10-22 Damien

jQuery가 기본적으로 새로로드 된 컨텐츠로 이동하지 않기 때문에 일부 jQuery 코드를 게시하십시오. – Magnar

다른 시나리오에서 비슷한 문제가있었습니다. 시체의 시작 높이가 시체의 끝 높이와 동일하거나 그 이상인 경우 아무런 문제가 없습니다. 반대 방향으로 가면보기 포트가 화면 상단으로 점프합니다. 제가 한 것은 내용이 오기 전에 몸의 끝 높이를 미리 계산하고 미리 설정해 놓은 것입니다. 저는 예제와 붙인 것을 반 기능적 HTML 페이지에 넣었습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script> 
    function UpdateChartImage(ChartContent) { 
     //do updates on div here 
     var existingChart = $("#content"); 
     existingChart.fadeOut("fast", function() { 
      existingChart.html(ChartContent); 

      // sets body's height to match the end-height 
      $(document.body).height($(document.body).height()); 
     }).fadeIn("fast"); 
    } 

    $(function() { 
     $('#div_change').click(function(){ 
     UpdateChartImage("asdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshad") 
     }) 
    }); 
</script> 
</head> 

<body style="padding: 0; margin: 0;"> 
    <div id="header" style="height: 200px; background-color: #0FF;">this is the header</div> 
    <div id="content" style=""></div> 
    <div id="footer" style="height: 200px; background-color: #ced;">this is the footer</div> 
    <a id="div_change">click me to change the body's div content</a> 
</body> 
</html>

희망 하시겠습니까?

출처

2009-10-27 11:38:53 Frankie

거의 완료되었습니다! 처음으로 함수를 실행해도 작동하지 않습니다. 그 후에는 문제 없습니다. – Damien

@Damien 즉, 문제는 실제로 내가 가지고있는 것과 유사하다는 것을 의미합니다. 나는 왜 당신에게서 어떤 부호없이 첫번째 뛰기에 작동하지 않는지 말할 수 없다. 아마도 데모 페이지를 어딘가에 게시 할 수 있습니다. 그리고, 그것은 모든 브라우저에서 발생합니까 아니면 단 하나의 특정 취향에 문제가 있습니까? – Frankie

중지 된 것으로 보입니다. 이상한. 건배 – Damien

콘텐츠 업데이트 중에 페이지가 리플 로우되는 것처럼 보입니다. 업데이트하기 전에 컨테이너의 $ .width() 및 $ .height()를 가져 와서 $ .css()로 값을 설정하십시오. 이렇게하면 내용이 변경되는 동안 컨테이너가 움직이지 않습니다.

출처

2009-10-22 10:08:36

어떤 컨테이너? 내가 새로 추가 된 내용의 상단으로 점프에서 브라우저보기 창을 중지하고 싶습니다. 사업부가 이사하지 않았습니까? – Damien

내가 무슨 뜻인지 이해했다면, 업데이트하기 전에 본문 스크롤 위치를 임시 변수에 저장 한 다음 저장된 스크롤을 본문 뒤에 설정해야 할 수 있습니다.

window.st = document.body.scrollTop; 
window.sl = document.body.scrollLeft; 

//do updates on div here 

document.body.scrollTop = window.st; 
document.body.scrollLeft = window.sl;

편집 :

것은 당신이 사용하는 경우 jQuery의 이벤트 핸들러는 해당 이벤트에 거짓를 반환 을 시도,이 5 월은 상단에 점프에서 페이지를 중지합니다.

$('#item').click (function() { // stuff here return false;//prevent page from jumping at the top when long page items are rendered });

출처

2009-10-22 10:24:45 jerjer

왜 바르 (vars)에 대해 윈도우 (일명 글로벌 공간)를 사용합니까? 이것은 나쁜 습관입니다. 단지 "var st = ..."로 정의하십시오. –

이런 식으로하고 있습니까? 링크를 클릭하면

<a href="#" onclick="[your jQuery call]">

href="#" 부분은 상단에 페이지 점프를 만들 것입니다. div 요소가 점차 숨겨되고

출처

2009-10-22 11:02:48 truppo

아니, 그것은 이벤트 일이 아닙니다. 다른 자바 스크립트 메서드에서 발생합니다. 단추 누르기 이벤트 함수에 event.preventDefault 있습니다. – Damien

는이 코드를 실행할 때 발생하는 것입니다. fadeOut이 완료되면 완전히 숨겨집니다 (표시가 없음으로 설정 됨). 브라우저는 페이지의 높이를 조정하고 페이지의 끝으로 점프합니다. 그런 다음 새로운 div가 페이드 인됩니다. 브라우저는 점프를하지 않으며 이전의 위치를 유지합니다. 당신에게 그것은 fadeIn 후에 그것은 새로 추가 된 div의 꼭대기로 뛰어 올랐습니다. 애니메이션 속도를 느리게 설정하여 진행 상황을 더 잘 이해합니다.

문제를 해결하는 가장 쉬운 방법은 애니메이션을 트리거하는 버튼에 절대 위치 지정을 사용하는 것입니다. 이전 div와 새 div의 높이가 같습니까? 그렇다면 버튼의 상단 위치를 계산하는 것이 매우 쉽습니다.

출처

2009-10-27 11:30:18 kgiannakakis

작은 정보로 답하기 란 쉽지 않습니다.완전한 예제는 당신이 원하는 도움을 얻는 데 많은 도움이됩니다.

어쨌든, 나는이 중 하나를 의심 :

당신은 앵커 (언급 한 truppo)을 가지고로 preventDefault 트리거 이벤트를 지원하지 않습니다, 또는 당신이 길을 잘못 방지 할 수 있습니다. 이벤트 콜백, onclick/on [event] 속성에서 false를 반환하거나 앵커를 완전히 제거하여 차이가 있는지 확인하십시오. 이벤트를 바인딩하는 방법과 바인딩 할 요소의 html을 보여줄 수 있다면 유용 할 것입니다.
로드하는 내용에 스크립트가있어서 페이지가 스크롤됩니다.

출처

2009-10-27 12:00:19 gregers

은 나뿐만 아니라이 문제를 가지고있다 (http://docs.jquery.com/Ajax/jQuery.ajax#options를) "는 DOM에 삽입 할 때 포함 된 스크립트 태그는 평가", 나는 파악하기가 힘들었다 너무 쉽게되는 해결책을 발견 밖으로, 적어도 내 경우 경우 .

업데이트 할 div 주위에 다른 div를 추가하고 position : relative로 설정하십시오.

이것은 나를 위해 일했습니다. 물론 내용이 크기가 바뀌지 만 스크롤 막대가 페이지 상단으로 뛰어 오르지 않는다면 내용 울림은 여전히 뛰어납니다.

예 :

는

<div style="position: relative;"> 
    <div id="ajax_update"> 
    //This is what jQuery will update. 
    </div> 
</div>

출처

2010-05-10 09:50:45 jamietelin

-1

event.preventDefault();

나를 위해 일했다.

출처

2013-03-16 21:55:27

다른 답변을 먼저 읽었어야합니다. OP는이를 다른 응답에 대한 해답으로 특별히 할인합니다. http://stackoverflow.com/a/1606474/146325 – APC

jQuery 중지 새로로드 된 컨텐츠로 점프

답변

관련 문제