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

我担心屏幕上的锚点是标准的.hash行为。 AFAIK，无法覆盖它。

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

Answer 3

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

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

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

Javascript / jquery window.location.hash移动到屏幕中心

3 个答案: