在网页中经常用到锚点，特别是在比较长的页面中锚点的使用会增加用户体验，现在php中文网介绍html 锚点三种实现方法
1. 在同一页面中
<a name="add"></a><!-- 定义锚点 -->
<a href="#add">跳转到add</a>
2. 在不同页面中，锚点定位在a.html中，从另外一个页面的链接跳转到这个锚点
<a href="a.html#add">跳转到a.add</a>
3. 点击链接触发js事件，同时跳转到锚点，有两种处理方式：
第一种：
<a href="#add" οnclick="add()">触发add函数并跳转到add锚点</a>
第二种：
<p id="pNode"><!-- contents --></p><!-- 假设一个需要跳转到的节点 -->
<a href="#" οnclick="document.getElemetnById('pNode').scrollIntoView(true);return false;">通过scrollIntoView实现锚点效果</a>
在html中设置锚点定位有几种方法，使用id定位、使用name定位、使用js定位，这些方法不一定是最全的，只可以参考下
1、使用id定位：
| 1 2 3 4 5 6 7 8 9 10 11 12 |
<
a
href
=
"#1F"
name
=
"1F"
>锚点1</
a
>
<
p
name
=
"1F"
>
<
p
>
11111111111
</
br
>
11111111111
</
br
>11111111111
</
br
>11111111111
</
br
>11111111111
</
br
>
</
p
>
</
p
>
|
这样的定位可以针对任何标签来定位。
2、使用name定位：
| 1 2 3 |
<
a
href
=
"#5F"
>锚点5</
a
>
</
br
></
br
></
br
></
br
></
br
></
br
></
br
></
br
></
br
></
br
></
br
></
br
></
br
></
br
></
br
></
br
></
br
></
br
></
br
>
<
a
name
=
"5F"
>1111111</
href
>
|
使用name属性只能针对a标签来定位，而对p等其他标签就不能起到定位作用。
3、使用js定位
| 1 |
<
li
class
=
""
onclick
=
"javascript:document.getElementById('here').scrollIntoView()"
></
li
>
|
实例：
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 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<
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;
}
</
style
>
<
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);
}
</
script
>
</
head
>
<
body
>
<
p
class
=
"test"
>
<
a
name
=
"header_1"
id
=
"header_1"
></
a
>
<
strong
onclick
=
"javascript:scroller('header_4', 800);"
>header_1 --> header_4</
strong
>
<
p
>
</
p
>
</
p
>
<
p
class
=
"test"
>
<
a
name
=
"header_2"
id
=
"header_2"
></
a
>
<
strong
onclick
=
"javascript:scroller('header_5', 800);"
>header_2 --> header_5</
strong
>
<
p
>
</
p
>
</
p
>
<
p
class
=
"test"
>
<
a
name
=
"header_3"
id
=
"header_3"
></
a
>
<
strong
onclick
=
"javascript:scroller('header_6', 800);"
>header_3 --> header_6</
strong
>
<
p
>
</
p
>
</
p
>
<
p
class
=
"test"
>
<
a
name
=
"header_4"
id
=
"header_4"
></
a
>
<
strong
onclick
=
"javascript:scroller('header_7', 800);"
>header_4 --> header_7</
strong
>
<
p
>
</
p
>
</
p
>
<
p
class
=
"test"
>
<
a
name
=
"header_5"
id
=
"header_5"
></
a
>
<
strong
onclick
=
"javascript:scroller('header_3', 800);"
>header_5 --> header_3</
strong
>
<
p
>
</
p
>
</
p
>
<
p
class
=
"test"
>
<
a
name
=
"header_6"
id
=
"header_6"
></
a
>
<
strong
onclick
=
"javascript:scroller('header_2', 800);"
>header_6 --> header_2</
strong
>
<
p
>
</
p
>
</
p
>
<
p
class
=
"test"
>
<
a
name
=
"header_7"
id
=
"header_7"
></
a
>
<
strong
onclick
=
"javascript:scroller('header_1', 800);"
>header_7 --> header_1</
strong
>
<
p
>
</
p
>
</
p
>
</
body
>
</
html
>
|
以上就是html 锚点三种实现方法的详细内容，更多请关注php中文网其它相关文章！
更多推荐
html 锚点三种实现方法
发布评论