简介：
当点击页面的锚点时会跳转到指定id的元素，而实际表现的是滚动条滚动使指定id元素对齐滚动条所处元素的【顶端】。如果当页面上方出现fixed定位时，将会出现锚点定位不准确的情况。
1、问题重现
当使用锚点时，页面上方存在fixed定位，将会出现如下情况（点击“目录二”对应跳转“内容二”的锚点）：
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html>
<html>
<head>
>
>
</title>
>
>
<style>
}
}
;
;
}
}
}
}
}
}
}
}
}
</style>
</head>
<body>
</div>
>
<ul>
</li>
</li>
</li>
</li>
</ul>
>
>
</h2>
</div>
</div>
>
</h2>
</div>
</div>
>
</h2>
</div>
</div>
>
</h2>
</div>
</div>
</div>
</div>
</body>
</html>
|
2、巧妙运用margin跟padding解决问题
2.1、尝试给“内容*”添加外边距 ==> margin-top:80px
2.1.1、效果如下（没有变化）：
2.1.2、代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html>
<html>
<head>
>
>
</title>
>
>
<style>
}
}
;
;
}
}
}
}
}
}
}
}
}
</style>
</head>
<body>
</div>
>
<ul>
</li>
</li>
</li>
</li>
</ul>
>
>
</h2>
</div>
</div>
>
</h2>
</div>
</div>
>
</h2>
</div>
</div>
>
</h2>
</div>
</div>
</div>
</div>
</body>
</html>
|
2.1.3、结论：锚点定位跟外边距没有关系。
2.2、尝试给“内容*”添加内边距 ==> padding-top:80px
2.2.1、效果如下（虽然锚点定位准了但是却多出来内边距部分）：
2.2.2、代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html>
<html>
<head>
>
>
</title>
>
>
<style>
}
}
;
;
}
}
}
}
}
}
}
}
}
</style>
</head>
<body>
</div>
>
<ul>
</li>
</li>
</li>
</li>
</ul>
>
>
</h2>
</div>
</div>
>
</h2>
</div>
</div>
>
</h2>
</div>
</div>
>
</h2>
</div>
</div>
</div>
</div>
</body>
</html>
|
2.2.3、结论：锚点定位跟内边距有关。
2.3、margin跟padding结合：锚点定位跟内边距有关并且与外边距无关。若单纯给内容添加内边距会影响到我们的页面。
所以我们给“内容*”加上padding-top:80px;margin-top:-80px;即解决我们的问题。
2.3.1、效果如下：
2.2.2、代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html>
<html>
<head>
>
>
</title>
>
>
<style>
}
}
;
;
}
}
}
}
}
}
}
}
}
</style>
</head>
<body>
</div>
>
<ul>
</li>
</li>
</li>
</li>
</ul>
>
>
</h2>
</div>
</div>
>
</h2>
</div>
</div>
>
</h2>
</div>
</div>
>
</h2>
</div>
</div>
</div>
</div>
</body>
</html>
|