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