html 锚点三种实现方法
在网页中经常用到锚点，特别是在比较长的页面中锚点的使用会增加用户体验，现在php中文网介绍html 锚点三种实现方法
1. 在同一页面中
跳转到add
2. 在不同页面中，锚点定位在a.html中，从另外一个页面的链接跳转到这个锚点
跳转到a.add
3. 点击链接触发js事件，同时跳转到锚点，有两种处理方式：
第一种：
触发add函数并跳转到add锚点
第二种：
通过scrollIntoView实现锚点效果
在html中设置锚点定位有几种方法，使用id定位、使用name定位、使用js定位，这些方法不一定是最全的，只可以参考下
1、使用id定位：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<
a
href
=
"#1F"
name
=
"1F"
>锚点1
<
p
name
=
"1F"
>
<
p
>
11111111111
11111111111
|
这样的定位可以针对任何标签来定位。
2、使用name定位：
|
1
2
3
|
<
a
href
=
"#5F"
>锚点5
<
a
name
=
"5F"
>1111111
|
使用name属性只能针对a标签来定位，而对p等其他标签就不能起到定位作用。
3、使用js定位
|
1
|
<
li
class
=
""
onclick
=
"javascript:document.getElementById('here').scrollIntoView()"
>
|
实例：
js 锚点平滑定位
|
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
<
head
>
<
style
type
=
"text/css"
mce_bogus
=
"1"
>
p.test {
width: 400px;
margin: 5px auto;
border: 1px solid #ccc;
}
p.test strong {
font-size: 16px;
background: #fff;
border-bottom: 1px solid #aaa;
margin: 0;
display: block;
padding: 5px 0;
text-decoration: underline;
color: #059B9A;
cursor: pointer;
}
p.test p {
height: 400px;
background: #f1f1f1;
margin: 0;
}
<
script
type
=
"text/javascript"
>
function intval(v){
v = parseInt(v);
return isNaN(v) ? 0 : v;
} // ?取元素信息
function getPos(e){
var l = 0;
var t = 0;
var w = intval(e.style.width);
var h = intval(e.style.height);
var wb = e.offsetWidth;
var hb = e.offsetHeight;
while (e.offsetParent) {
l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
e = e.offsetParent;
}
l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
return {
x: l,
y: t,
w: w,
h: h,
wb: wb,
hb: hb
};
} // ?取??条信息
function getScroll(){
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
}
else
if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
return {
t: t,
l: l,
w: w,
h: h
};
} // ?点(Anchor)?平滑跳?
function scroller(el, duration){
if (typeof el != 'object') {
el = document.getElementById(el);
}
if (!el)
return;
var z = this;
z.el = el;
z.p = getPos(el);
z.s = getScroll();
z.clear = function(){
window.clearInterval(z.timer);
z.timer = null
};
z.t = (new Date).getTime();
z.step = function(){
var t = (new Date).getTime();
var p = (t - z.t) / duration;
if (t >= duration + z.t) {
z.clear();
window.setTimeout(function(){
z.scroll(z.p.y, z.p.x)
}, 13);
}
else {
st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.y - z.s.t) + z.s.t;
sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.x - z.s.l) + z.s.l;
z.scroll(st, sl);
}
};
z.scroll = function(t, l){
window.scrollTo(l, t)
};
z.timer = window.setInterval(function(){
z.step();
}, 13);
}
<
body
>
<
p
class
=
"test"
>
<
a
name
=
"header_1"
id
=
"header_1"
>
<
strong
onclick
=
"javascript:scroller('header_4', 800);"
>header_1 --> header_4
<
p
>
<
p
class
=
"test"
>
<
a
name
=
"header_2"
id
=
"header_2"
>
<
strong
onclick
=
"javascript:scroller('header_5', 800);"
>header_2 --> header_5
<
p
>
<
p
class
=
"test"
>
<
a
name
=
"header_3"
id
=
"header_3"
>
<
strong
onclick
=
"javascript:scroller('header_6', 800);"
>header_3 --> header_6
<
p
>
<
p
class
=
"test"
>
<
a
name
=
"header_4"
id
=
"header_4"
>
<
strong
onclick
=
"javascript:scroller('header_7', 800);"
>header_4 --> header_7
<
p
>
<
p
class
=
"test"
>
<
a
name
=
"header_5"
id
=
"header_5"
>
<
strong
onclick
=
"javascript:scroller('header_3', 800);"
>header_5 --> header_3
<
p
>
<
p
class
=
"test"
>
<
a
name
=
"header_6"
id
=
"header_6"
>
<
strong
onclick
=
"javascript:scroller('header_2', 800);"
>header_6 --> header_2
<
p
>
<
p
class
=
"test"
>
<
a
name
=
"header_7"
id
=
"header_7"
>
<
strong
onclick
=
"javascript:scroller('header_1', 800);"
>header_7 --> header_1
<
p
>
|
以上就是html 锚点三种实现方法的详细内容，更多请关注php中文网其它相关文章！