Javascript는 고정 된 머리글로 큰 div에 초점을 맞추고 있습니다.

Question

저는 '$.scrollTo'이라는 작은 라이브러리를 사용하여 HTML에서 div 요소에 대한 스크롤을 움직입니다. 내 페이지 상단에는 고정 된 탐색 막대가 있습니다. 애니메이션이 끝나면 해당 div에 초점을 맞추고 싶습니다 (접근성 향상을 위해). 내 div가 큰 경우, 애니메이션이 끝나면 초점이 맞춰집니다. 단순히 화면에서 약간 벗어납니다.

작은 div에서는 발생하지 않습니다. 여기

$('#buttonid').on("click", function() { 

//fixed nav bar height (to compensate when scrolling) 
var fixed_navbar_height = $("#navbar-id").height(); 

//the element to scroll to 
var $go_to_selector = $("#topic2"); 

$.scrollTo($go_to_selector, { 
    duration: 1000, 
    offset: -fixed_navbar_height, 
    onAfter: function() { 
    //if you comment out this .focus it works as intended. 
    $go_to_selector.focus(); 
    } 
}); 
}); 

가 JSFIDDLE 예는 다음과 같습니다 : 여기

내 코드 (아래 jsfiddle 확인)입니다 https://jsfiddle.net/dy35obpq/3/

분명히 onAfter 그것을 망쳐 놨지만, 나는 애니메이션과 초점을 모두 싶습니다 . 스크롤 막대를 변경하지 않고 큰 div에 포커스를 구현하는 방법에 대한 아이디어가 있습니까? 제안은 환영보다.

Answer 1

시도해보십시오.

onAfter: function() { 
    $go_to_selector.focus(); 
    $(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height); 
    } 

이 줄을 onAfter 콜백에 추가했습니다. $(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height);

여전히 초점을 유지하면서 문제가 해결 된 것으로 보입니다. 초점 파란색 강조 표시를 사용하지 않으려면 CSS를 사용하는 것이 좋습니다.