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

【问题标题】：Javascript/jquery window.location.hash move to center of screenJavascript/jquery window.location.hash 移动到屏幕中心
【发布时间】：2012-01-13 18:22:58
【问题描述】：

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

这是表单的 sn-p。

<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>

【问题讨论】：

标签： javascript jquery window.location

【解决方案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;   
}

【讨论】：

行得通！谢谢。我还在学习javascript，所以看起来我必须阅读offset和scrollTop，因为我以前从未使用过它们。再次感谢。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：