Jump Links And Viewport Position

文章发表于3385天前。日期过于久远，请合理参考。
This article was created at 3385 days ago. It is too long, so please pay more attention.

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:

Junjia Ni#

Email: creamidea@gmail.com

Date: 2015-12-27

LMT: 2016-10-23 Sun 23:09

Load Comments