相信大家会遇到这种情景，使用锚点来做到点击超链接的同时，定位到对应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>