搭配锚点使用的小技巧，自定义控制定位元素距离可视区域顶部的距离。

1. 前言

  相信大家会遇到这种情景，使用锚点来做到点击超链接的同时，定位到对应ID的元素，并且被定位的元素是紧紧靠在可视区域的顶部的。分享一种可以自定义控制距离顶部距离的小妙招。

2. 一个正常的锚点例子 （复制到本地运行）

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body,ul{
                margin: 0;
                padding: 0;
            }
            li{
                height: 400px;
                border: 2px solid #000;
                margin-bottom: 10px;
                font-size: 60px;
            }
            div{
                position: fixed;
                top: 200px;
                left: 300px;
                display: flex;
            }
            div a{
                padding: 0 20px;
                border: 1px solid #000000;
                line-height: 30px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li id="li1">1</li>
            <li id="li2">2</li>
            <li id="li3">3</li>
            <li id="li4">4</li>
            <li id="li5">5</li>
            <li id="li6">6</li>
        </ul>
        <div>
            <a href="#li1">1</a>
            <a href="#li2">2</a>
            <a href="#li3">3</a>
            <a href="#li4">4</a>
            <a href="#li5">5</a>
            <a href="#li6">6</a>
        </div>
    </body>
</html>

 

 

3. 自定义高度的小妙招

 

/*妙招*/
   li{
      /*padding-top  绝对定位后的元素距离顶部的距离*/
      padding-top: 300px;
      /*对应内边距，消除内边距撑开的距离*/
      margin-top: -300px;
   }

 

 

4. 后语

　　大家可能发现了第一个li跑到屏幕外了  ，  因为需要自定义这个距离的时候 ， 要么顶部有固定定位的元素 ，这时body肯定会有padding的可以抵消，如果没有那么可以写在ul上来消除padding

 

 

 

 

posted @ 2018-03-29 11:52  十年雪落  阅读(828)  评论(0)  编辑  收藏  举报