Javascript / jquery window.location.hash переместить в центр экрана

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

Вы также можете попробовать решить эту проблему с помощью CSS, используя отрицательное поле + отступы. Он не будет точно центром, но он будет перемещать якоря сверху.

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

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

Answer 3

Боюсь, что привязка к верху экрана - это стандартное поведение .hash.AFAIK, нет способа переопределить его.

Вы можете достичь желаемого поведения, поместив свои якоря на половину экрана в документе выше, чем содержимое, которое вы хотите центрировать.Сложно, но возможно с содержанием известных размерных характеристик.