Javascript/jquery window.location.hash画面の中央に移動

Question

jqueryを使用していくつかの基本的な検証を実行しようとしているフォームがあります。私は入力の名前に対応する名前の空のアンカーを持っています。最初のフィールドが空であれば、入力の名前が格納され、検証スクリプトが完了すると、空のアンカーの名前であるwindow.location.hash = name + "hash"が呼び出されます。問題は、アンカーが画面の最上部に表示されるようにウィンドウを移動していることです。アンカーが画面の中央に表示されるようにウィンドウを移動したいと思います。これは可能ですか？ここに私が持っているものがあります。

function formValidate() 
{ 
var $retValue = true; 
var $inputs = $('.req'); 
var $winLoc = ''; 
$inputs.each(function() 
{ 
    if($(this).val() === "" && this.name != "salesmanName2") 
    { 
     var $helper = this.name + "Help"; 
     var $pointer = this.name + "Pointer"; 
     event.preventDefault(); 
     ($(this).addClass('reqMissing')); 
     showHelper($helper, $pointer); 
     if($winLoc == '' && this.name != "salesmanName2") 
     { 
      $winLoc = this.name + "Anchor"; 
     } 
     $retValue = false; 
    } 
    else 
    { 
     ($(this).removeClass('reqMissing'));  
    } 
}); 
if($winLoc !== '') 
{ 
    window.location.hash=$winLoc; 
} 
return $retValue; 
} 

次に、フォームのスニペットを示します。

<li> 
    <a name="controlNumberAnchor"></a> 
    <label for='controlNumber'>Control Number: </label> 
    <input class='req' type='text' name='controlNumber' size='10' /><em>*</em> 
    <div id='controlNumberPointer' class='pointer'></div> 
    <div id='controlNumberHelp' class='helpBox'>Control number required</div> 
</li> 

Answer 1

ハッシュを使用するだけでは不可能です。ハッシュに基づいて計算された値で文書のscrollTopを設定する必要があります。これを試して。

function formValidate() 
{ 
var $retValue = true; 
var $inputs = $('.req'); 
var $winLoc = ''; 
$inputs.each(function() 
{ 
    if($(this).val() === "" && this.name != "salesmanName2") 
    { 
     var $helper = this.name + "Help"; 
     var $pointer = this.name + "Pointer"; 
     event.preventDefault(); 
     ($(this).addClass('reqMissing')); 
     showHelper($helper, $pointer); 
     if($winLoc == '' && this.name != "salesmanName2") 
     { 
      $winLoc = this.name + "Anchor"; 
     } 
     $retValue = false; 
    } 
    else 
    { 
     ($(this).removeClass('reqMissing'));  
    } 
}); 
if($winLoc !== '') 
{ 
    //window.location.hash=$winLoc; 
    var top = $('[name=' + $winLoc + ']').offset().top; 
    $(document).scrollTop(top - ($(window).height()/2)); 
} 
return $retValue; 
} 

Answer 2

アンカーツースクリーンは標準的なハッシュ動作です。 AFAIK、それを無効にする方法はありません。

アンカーを中央に配置するコンテンツよりもドキュメントの半画面上に配置すると、適切な動作を実現できます。トリッキーですが、既知の寸法特性の内容で可能です。

Answer 3

CSSで負の余白+パディングを使用してこれを解決することもできます。ちょうど中央ではありませんが、上からアンカーを移動します。

a[name] { 
    padding-top: 150px; 
    margin-top: -150px; 
    display: inline-block; 
} 

a[name]:hover { 
    text-decoration:none; 
}