如何将一个元素移动到固定标题的下方

Question

我正在试着在onClick()中将每个<li>移动到屏幕顶部，使用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/

谢谢。

- user1846348

Answer 1

在使用scrollIntoView()后，可以通过类似以下方式将其向下推50像素：

scrollBy(0, -50);

- Tushar Roy

---

可以使用其他单位（rem、pt等）来完成这个任务吗？ - anon

Answer 2

使用onclick代替onClick。同时，你定义了函数名为moveup，但是调用时却使用了moveUp。

使用jQuery可以轻松实现所需的功能。请查看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())
})

- alekperos

Answer 3

我已经修复了你的示例，现在它可以正常工作：[jsfiddle.net/t3go7b0u/4][1] 我知道这个问题很久了，你可能已经解决了... 但是为了记录。更改内容：在标题和固定/粘性元素上添加position:sticky，并使用滚动插件[smartScroll][2]

更改内容：

   header {
      position: fixed;
   }

   $('#li' + x).smartScroll("start");

function moveUp(x){
   // document.getElementById('li'+x).scrollIntoView();
   // https://github.com/webdevelopers-eu/DNA-Smart-Scroll
   $('#li' + x).smartScroll("start");
}

header {
    position: sticky;
    top: 0;
    right: 0;
    left: 0;
    height: 50px;
    background-color: red;
}

*[onclick] {
  cursor: pointer;
}
*[onclick]:hover {
  outline: 2px solid orange;
  opacity: 0.5;
}

#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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.rawgit.com/webdevelopers-eu/DNA-Smart-Scroll/main/jquery.smartscroll.js"></script>

<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-->

  [1]: https://jsfiddle.net/t3go7b0u/4
  [2]: https://github.com/webdevelopers-eu/DNA-Smart-Scroll

- elixon