2013-04-28 2 views
0

jQuery에서 scrollTo 함수를 사용하여 페이지의 요소로 부드럽게 스크롤합니다. 동일한 페이지 내에서 대상이있는 링크를 클릭하는 동안 제대로 작동합니다.페이지로드 후 요소 scrollTo (잘못된 위치)

제 문제는 페이지로드 (otherDoc.aspx? a = elementId 및 if Request.QueryString ...)에서 직접 외부 페이지에서 작업하기를 원합니다. 문제는 모든 내용이 완전히로드되지 않아서 요소 위치가 변경되어 결과가 느린 연결에서 더 나빠질 수 있다는 것을 의미하는 올바른 위치로 스크롤하지 않는다는 것입니다. 지연을 테스트하기 위해 setTimeout을 시도한 다음 올바른 위치로 스크롤합니다. 옵션은 외부 링크에 간단한 앵커 #myAnchor를 수행하는 것이지만 부드러운 스크롤은 더 좋은 느낌을줍니다.

내 코드 :

<script> 
$(document).ready(function() { 

$(window).scrollTo("#" + elementId, 1000); 

}); 
</script> 

어떤 제안? 감사!

답변

7

$ (document) .ready()는 HTML 및 헤드 스크립트가로드 될 때 실행됩니다 ... 대신 모든 애셋을 포함하는 전체 페이지가로드 될 때 실행되는 $ (window) .load()를 시도해야합니다. 일부 캐시 된 이미지는 셀 수 없기 때문에 열심히 새로 고침하여 테스트 해보지 만 원하는 효과를 얻으실 수 있습니다.

URL을 모르지만 타겟팅하는 앵커 요소의 위치에 높이에 영향을주는 스타일이 있거나 블록 요소로 렌더링되거나 때때로 스크롤 할 수있는 위치로 재생되는 경우가 있습니다. 만약 당신이 앵커 요소에 꼭두각시를 추가 할 수 있다면 특히 SECTION이나 ARTICLE을 시작하면 맨 위에 작은 공간이있어서 제목 텍스트가 스크롤 위치의 0 번 위치에 맞지 않게됩니다.

+0

많은 감사! 잘 작동하는 것 같습니다. 그러나 저속 연결을 시뮬레이트하여 느린 연결을 가진 사용자가 어떻게 경험 하는지를보고 싶습니다. 그것은 모든 블록 요소이며 그들은 모두 잘있다 그래서 가기 패딩있다 :) – Petter