Javascript/jquery window.location.hash move to center of screen

Question

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>

Answer 1

It is not possible by just using hash. You will have to set the scrollTop of the document by with the calculcated value based on the hash. Try this.

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

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.

Answer 3

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.

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

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