Home > Article > Web Front-end > Three implementation methods of html anchor points
Three implementation methods of html anchor points
- PHPzOriginal
- 2017-04-03 16:57:564791browse
Anchors are often used in web pages, especially in relatively long pages. The use of anchors will increase the user experience. Now PHP Chinese website introduces three implementation methods of html anchors.
1. In the same page
5b62bd7d775b2adbc1bb9c77cffa9ea45db79b134e9f6b82c0b36e0489ee08ed14fd0215ad09a048cecbeae4dfede9a5
938982549c59a5488a452fa0c36127cfJump to add5db79b134e9f6b82c0b36e0489ee08ed
2. In different pages, the anchor point is positioned in a.html, from another page The link jumps to this anchor point
59baaeaf69a9f8e28ce84a8d935b5ebaJumps to a.add5db79b134e9f6b82c0b36e0489ee08ed
3. Click the link to trigger the js event and jump to the anchor at the same time Click, there are two ways to handle it:
The first one:
de348a754106d073e6fc33e6b97d532eTrigger the add function and jump to the add anchor1bced300f69af2d9ccb485f16b9567f6a0586c6af6e275ce5e5474c26327430394b3e26ee717c64999d7867364b1b4a3dd962e9a4c9ae01c3651744ae41a5e60
3a9badff1b4e8850784e83015b3e70c5Anchor effect through scrollIntoView5db79b134e9f6b82c0b36e0489ee08ed
There are several ways to set anchor positioning in HTML. Use id positioning, use name positioning, and use js positioning. These methods are not necessarily the most complete. You can only refer to the following.
1. Use id to locate:
# #
<a href="#1F" name="1F">锚点1</a> <p name="1F"> <p> 11111111111 </br> 11111111111 </br>11111111111 </br>11111111111 </br>11111111111 </br> </p> </p>
Such positioning can be targeted at any tag.
2. Use name to locate:
#<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>
3. Use js positioning
## 实例：<li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li>
js
锚点平滑定位
<!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>
The above is the detailed content of Three implementation methods of html anchor points. For more information, please follow other related articles on the PHP Chinese website!