How to move an item just below a fixed title

Question

I am trying to move each <li> to the top of the screen on onClick() , and its working using scrollIntoView(); but since my title is fixed, a small portion of the <li> goes below the title. How to scroll <li> just below the title.

HTML

  <header></header> <div id="wrapper"> <ul> <li id='li1' onClick="moveup(1)"> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li2' onClick='moveUp(2)'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li3' onClick='moveUp(3)'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li4' onClick='moveUp(4)'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li1' onClick='moveUp(1)'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li5' onClick='moveUp(5)'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> </ul> </div> <!--end wrapper--> 

CSS

 header { position: fixed; top: 0; right: 0; left: 0; height: 50px; background-color: red; } #wrapper { width: 1000px; background-color: blue; height: 100%; margin: 0 auto; } #col1 { background-color: green; height: 100%; width: 80%; margin: 0 auto; } ul { margin: 0 auto; width: 500px; display: block; } li { display: block; background-color: yellow; height: 500px; width: 500px; margin-bottom: 5px; } 

JAVASCRIPT

 function moveup(x){ document.getElementById('li'+x).scrollIntoView(); } 

http://jsfiddle.net/Jn74M/2/

Thanks.

Answer 1

After scrollIntoView() click it 50 pixels, using something like this:

 scrollBy(0, -50); 

Answer 2

use onClick instead of onClick . you also defined the function as moveup , but you called moveup .

With jQuery, it would be easy to achieve the required functionality. check out http://jsfiddle.net/alekperos/Jn74M/3/

HTML

 <header></header> <div id="wrapper"> <ul> <li id='li1'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li2'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li3'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li4'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li5'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> </ul> </div> <!--end wrapper--> 

Js

 // on click of list element $('li').click(function(){ // scroll the window in the amount of position of current clicked list element // minus // the amount that corresponds to the height of the header $(window).scrollTop($(this).position().top - $('header').height()) })