점프 후 정박 된 이미지의 중심?

와이드 (4000px) 페이지의 앵커 태그로 점프하면 앵커 이미지가 오른쪽에 수평으로 정렬됩니다. 센터에 맞추려면 어떻게해야합니까? 여러 가지 시도를했지만 아무 것도 작동하지 않는 것 같습니다. 내가 여기 새로 왔기 때문에 코드를 게시 할 수 없으므로 충분히 명확 해 졌으면 좋겠다. 브라우저가보기에 고정 된 요소를 가지고하는 데 필요한 스크롤 최소한의 작업을 수행하기 때문에 당신의 도움에 대한점프 후 정박 된 이미지의 중심?

감사합니다,

로버트 C.

출처

2009-12-02 Robert C.

URL은 어떻습니까? –

pastebin과 같은 서비스를 사용하여 코드를 붙일 수 있습니다 –

http://www.cslack.com/test.html –

문제가 발생합니다. 따라서 볼 수있는 영역의 오른쪽에서 벗어난 경우 앵커 태그를 클릭하면 전체 요소를 표시 할 수있을만큼 오른쪽으로 스크롤됩니다.

자바 스크립트로이 동작을 해결할 수 있습니다 (옵션 인 경우). 스트레이트 CSS로 클릭하면 #anchor에 센터를 배치 할 수 없습니다.

다음은 jQuery를 사용하는 "솔루션"입니다. 나는 당신이 원하는 것보다 더 많은 문제를 가져올 수 있기 때문에 따옴표 안에 "해결책"이있다. 예를 들어, 추가 JS가 없으면 뒤로 버튼은 이전 링크로 이동하지 않습니다. 그러나 이는 샘플 코드가있는 항목을 가운데에 맞 춥니 다.

는 그냥 닫는 <head> 태그 앞에 위에 링크 된 페이지에이 추가 :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    $("a[href^=#]").click(function(e){ 
     var id  = $(this).attr('href').substr(1), 
      $target = $('*[name=' + id + '] img'), 
      $window = $(window), 
      offset = $target.offset(); 

     var left = offset.left - ($window.width()/2) + ($target.width()/2); 
     var top = offset.top - ($window.height()/2) + ($target.height()/2); 


     $('html,body').scrollTop(top).scrollLeft(left); 

     e.preventDefault(); // Keep the browser from trying 
    }); 
}); 
</script>

이 (#와 HREF 시작) 모든 a 내부 링크와 태그를 찾을 수 있습니다. 그런 다음 해당 이름을 가진 대상을 찾고 자식 img 태그를 가져옵니다. 그런 다음 img 요소와 window 요소의 크기를 가져옵니다. img 요소가있는 일부 수학이 상쇄되고 가운데로 스크롤됩니다.

출처

2009-12-02 04:53:55

빠른 답장을 보내 주셔서 감사합니다. JS 솔루션은 온라인에서 찾을 수 있습니까? 나는 자바 스크립트를 쓰는 것이 당분간 내 능력 밖이 될 수 있으므로이 책에 익숙하지 않다. –

안녕하세요 @ 로버트, 제가 도울 수 있다고 생각합니다. 그러나 두 가지 질문이 우선입니다. 지금까지 가지고있는 것의 링크를 게시 할 수 있습니까? # 2에서는 페이지에서 jQuery (56k)를 사용하는 것에 반대합니까? –

Doh ... 위의 링크를 보지 못했습니다. 좋아요. 질문 # 2에 답하십시오. –

점프 후 정박 된 이미지의 중심?

답변

관련 문제