jQuery innerHeight()가 잘못된 값을 반환했습니다.

Question

CSS Tricks Smooth Scrolling을 사용하여 메뉴 링크를 페이지의 다른 부분으로 스크롤합니다. 고정 된 탐색 막대의 높이를 고려하여 - jQuery('#masthead').height()을 추가했습니다. 그러나 메뉴 항목을 클릭하면 해당 지점으로 스크롤되어 메뉴 막대와 스크롤 할 위치 사이에 하나의 여분의 픽셀이 나타납니다. See what I mean here.

jQuery(function() { 
    jQuery('a[href*="#"]:not([href="#"])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = jQuery(this.hash); 
     target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     jQuery('html, body').animate({ 
      scrollTop: target.offset().top - jQuery('#masthead').innerHeight() 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

Answer 1

연료 소모량 innerHeight()가 예상대로 작동합니다 다음, 대신 outerHeight()를 사용해야합니다 패딩 또는 테두리를 추가하지 않습니다

여기 내 jQuery 코드입니다.

jQuery(function() { 
    jQuery('a[href*="#"]:not([href="#"])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = jQuery(this.hash); 
     target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     jQuery('html, body').animate({ 
      scrollTop: target.offset().top - jQuery('#masthead'). outerHeight() 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
});