html - Named anchor jump menu last item position not positioned towards the top -

does have css solution have last item in named anchor link list orient content towards top? way have found work have plenty of empty space below last item. best way of doing this? other thing may work use js force position on last item click.

https://jsfiddle.net/jacoblett/ejdy4ncd/embedded/result/

https://jsfiddle.net/jacoblett/ejdy4ncd/

css

.header {border:1px solid black;background-color:#e2e2e2;position: fixed; top: 0;}              .anchor {height:150px;}              article {margin:200px 0;width:600px;}              .anchor{               display: block;               margin-top: 0;                visibility: hidden;             } 

html

            <div class="header">             <h1>named anchor jump link menu</h1>             <nav>             <ul>             <li><a href="#section1">section 1</a></li>             <li><a href="#section2">section 2</a></li>             <li><a href="#section3">section 3</a></li>             </ul>             </nav>             </div>             <article>             <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod             tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo             consequat. duis aute irure dolor in reprehenderit in voluptate velit esse             cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non             proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>              <span class="anchor" id="section1"></span>             <div class="section">             <h1>section 1</h1>             <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod             tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo             consequat. duis aute irure dolor in reprehenderit in voluptate velit esse             cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non             proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>             </div>              <span class="anchor" id="section2"></span>             <div class="section">             <h1>section 2</h1>             <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod             tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo             consequat. duis aute irure dolor in reprehenderit in voluptate velit esse             cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non             proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>             </div>              <span class="anchor" id="section3"></span>             <div class="section">             <h1>section 3</h1>             <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod             tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo             consequat. duis aute irure dolor in reprehenderit in voluptate velit esse             cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non             proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>             </div>             </article> 

please see if need: https://jsfiddle.net/ejdy4ncd/23/

to explain little:

1. your problem dependent on screen height, solution based on screen height.

2. i removed <span> because included artificially create space. it's bad practice muddle content , presentation. use margin / padding in css instead.

3. i replaced markup semantic tags. had things <div class="section"> instead of <section>. , #section1, #section2, #section3 <span> tags. confusing :s