Javascript/jquery window.location.hash 移动到屏幕中央
我有一个表单，我正在尝试使用 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>
I have a form that I'm trying to run some basic validation on using jquery. I have empty anchors with names that correspond to the names of the inputs. When the first field is found empty, it stores the name of the input and when the validations script is done, it calls window.location.hash = name + "hash", which is the name of the empty anchor. The problem is, it's moving the window so that the anchor is showing at the very top of the screen, and I'd like it to move the windows so the anchor shows in the middle of the screen. Is this possible? Here's what I have.
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;
}
And here's a snippet of the form.
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
仅使用哈希是不可能的。您必须使用基于哈希计算的值来设置文档的
scrollTop。试试这个。It is not possible by just using hash. You will have to set the
scrollTopof the document by with the calculcated value based on the hash. Try this.恐怕锚定到屏幕顶部是标准的 .hash 行为。 AFAIK，没有办法覆盖它。
您可以通过将文档中的锚点放置在比您想要居中的内容高半个屏幕的位置来实现您想要的行为。很棘手，但对于已知尺寸特征的内容是可能的。
I'm afraid that anchor-to-top-of-screen is standard .hash behaviour. AFAIK, there's no way to override it.
You may be able to achieve the behaviour you want by putting your anchors one half-screen higher in the document than the content you want to be centred. Tricky, but possible with content of known dimensional characteristics.
您还可以尝试使用 CSS 解决此问题，即使用负边距+填充。它不会完全居中，但会从顶部移动锚点。
You can also try solving this with CSS, by using a negative margin+padding. It won't be exactly center but it will move anchors from the top.