javascript - 如何将元素移动到固定标题的正下方

Question

我正在尝试移动每个 <li>在屏幕顶部 onClick() , 及其工作使用 scrollIntoView();但是因为我的标题是固定的 <li> 的一小部分低于标题。如何滚动 <li>到标题下方。

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/

谢谢。

Answer 1

在 scrollIntoView() 之后，将其向下推 50px，使用如下所示:

scrollBy(0, -50);