1

幅の広い (4000px) ページでアンカー タグにジャンプすると、アンカーされた画像が右に水平に配置されます。中央に揃えるにはどうすればよいですか？私はいくつかのことを試しましたが、どれもうまくいかないようです。私はここに来たばかりなので、コードを投稿することは許可されていません。

ご協力いただきありがとうございます、

ロバート C.

4

1 に答える 1

0

この問題が発生するのは、ブラウザーが、アンカーされた要素を表示するために必要な最小限のスクロールを行うためです。したがって、アンカータグが表示可能領域の右にある場合、アンカータグをクリックすると、要素全体が表示されるまで右にスクロールするだけです。

オプションである場合は、javascript を使用してこの動作を修正できます。#anchorストレート CSS では、クリック時に中央に配置することはできません。

これが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>

a内部リンク (href は で始まる) を持つすべてのタグが検索されます#。次に、その名前を持つターゲットを見つけて、子imgタグを取得します。img次に、要素と要素の寸法を取得しwindowます。要素のオフセットを使用して計算を行い、img中央にスクロールします。

于 2009-12-02T04:53:55.280 に答える