Jump Links And Viewport Position

1 前言

最近写主页的时候配到一个问题，如可控制HTML中的锚点跳转之后的对象的位置。比如我点击了一个标题，我希望这个跳转过去的标题能够距离顶部一段距离。

2 Jump links and viewport position

2.1 A

default

2.2 B

#method-B:before {
    display: block;
    content: "";
    height: 50px;
    margin: -50px 0 0;
}

2.3 C

#method-C {
    padding-top: 50px;
    margin-top: -50px;
    \-webkit-background-clip: content-box;
    background-clip: content-box;
}

2.4 D

#method-D {
    border-top: 50px solid transparent;
    margin-top: -50px;
    \-webkit-background-clip: padding-box;
    \-moz-background-clip: padding;
    background-clip: padding-box;
}

2.5 E

#method-E {
    position: relative;
    padding: 15px;
    border-top: 52px solid transparent;
    margin-top: -50px;
    \-webkit-background-clip: padding-box;
    \-moz-background-clip: padding;
    background-clip: padding-box;
}

#method-E:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    border-top: 1px solid #ccc;
}

Reference: