Javascript/jquery window.location.hash 화면 중심으로 이동

jquery를 사용하여 기본 유효성 검사를 실행하려는 양식이 있습니다. 입력 이름에 해당하는 이름의 빈 앵커가 있습니다. 첫 번째 필드가 비어있는 경우 입력의 이름을 저장하고 유효성 검사 스크립트가 완료되면 window.location.hash = name + "hash"를 호출합니다.이 이름은 빈 앵커의 이름입니다. 문제는 앵커가 화면의 맨 위에 표시되도록 창을 움직이는 것이고 앵커가 화면 중앙에 표시되도록 창을 이동시키고 싶습니다. 이것이 가능한가? 여기에 내가 가진 것이있다.Javascript/jquery window.location.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>

출처

2012-01-13 Stewie

해시를 사용하는 것만으로는 불가능합니다. 해시를 기반으로 계산 된 값으로 문서의 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; 
}

출처

2012-01-13 18:28:34 ShankarSangoli

그건 작동합니다! 감사. 나는 자바 스크립트를 배우기 때문에 offset과 scrollTop을 읽지 않으면 안된다. 다시 한번 감사드립니다. – Stewie

표준 앵커 - 투 - 화면은 표준 .hash 동작입니다. AFAIK, 그것을 무시할 방법이 없습니다.

앵커를 가운데에 놓으려는 내용보다 절반 높이 화면에 올려 놓으면 원하는 동작을 얻을 수 있습니다. 까다 롭지 만 알려진 치수 특성의 내용으로 가능합니다.

출처

2012-01-13 18:31:04

CSS를 사용하여 음수 여백 + 패딩을 사용하여이 문제를 해결할 수도 있습니다. 정확히 센터가 아니지만 맨 위에서 앵커를 움직일 것입니다.

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

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

출처

2014-07-08 07:33:38 Kwiato

Javascript/jquery window.location.hash 화면 중심으로 이동

답변

관련 문제