html 로의 오프셋 스크롤?

Question

나는 HTML에서 링크를 클릭하면 페이지에서 원하는 위치로 자동 스크롤을 시도하고있다. 여기에 코드의 버튼/링크의 일부입니다

<li><a href="#Origins">Origins</a></li> 

는 그리고 나는이 코드로 표시되는 페이지의이 부분에 링크가 있습니다

<h3 id="Origins">Origins</h3> 

이 있지만, 완벽하게 잘 작동, 내 상단의 페이지 헤더 (h1)는 고정 된 위치로 설정됩니다. 링크를 클릭하면 상단의 헤더가 페이지의 "원본" 부분을 덮고있는 곳으로 너무 가깝게 이동합니다. 나는 작동하는 기원의 꼭대기에 패딩을 덧붙이려고했으나, 원하지 않는 페이지에 "기원"위에 공백이 많다. . 누구든지 아이디어가 있습니까? 미리 감사드립니다! 당신은 자바 스크립트와 함께 할 수

Answer 1

(예 : 아래 jQuery를 필요로하지만, 또한 바닐라 자바 ​​스크립트로 수행 할 수있다)을 h3의 위치 뺀 h1의 높이로 스크롤 :

$(function() { 
 
    var h1Height = $('h1').height(); // get height of h1 tag 
 
    $('li a').click(function (e) { 
 
     e.preventDefault(); 
 
     var target = $(this.hash); 
 
     $('html, body').animate({ 
 
      scrollTop: target.offset().top - h1Height // scroll to h3 minus height of h1 
 
     }, 1000); 
 
     return false; 
 
    }); 
 
});

body,html { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
h1{ 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    background:#fff; 
 
    position:fixed; 
 
    top:0; 
 
} 
 
ul { 
 
    margin:60px 0 0; 
 
} 
 
.space, h3 { 
 
    margin:1000px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Heading</h1> 
 

 
<ul><li><a href="#Origins">Origins</a></li></ul> 
 

 
<div class="space"></div> 
 

 
<h3 id="Origins">Origins</h3>