0

我有一个表单，我正在尝试对使用 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>
4

3 回答 3

2

仅使用哈希是不可能的。您必须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;   
}
于 2012-01-13T18:28:34.730 回答
0

恐怕锚到屏幕顶部是标准的 .hash 行为。AFAIK，没有办法覆盖它。

您可以通过将锚点放在文档中比您想要居中的内容高半个屏幕来实现您想要的行为。棘手，但可能具有已知尺寸特征的内容。

于 2012-01-13T18:31:04.517 回答
0

您也可以尝试使用 CSS 解决此问题，方法是使用负边距 + 填充。它不会完全居中，但会从顶部移动锚点。

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

a[name]:hover {
  text-decoration:none;
}
于 2014-07-08T07:33:38.860 回答