Maison > Article > interface Web > Trois méthodes d'implémentation des points d'ancrage HTML
Trois méthodes d'implémentation des points d'ancrage HTML
- PHPzoriginal
- 2017-04-03 16:57:564788parcourir
Les ancres sont souvent utilisées dans les pages Web, en particulier dans les pages plus longues. L'utilisation d'ancres augmentera l'expérience utilisateur. Désormais, le site Web chinois PHP introduit trois méthodes d'implémentation des ancres HTML. 1. Dans la même page
5b62bd7d775b2adbc1bb9c77cffa9ea45db79b134e9f6b82c0b36e0489ee08ed6f0872ed412e7025daa2a0c6f215aa42Sauter pour ajouter5db79b134e9f6b82c0b36e0489ee08ed
2 Dans différentes pages, le point d'ancrage est positionné dans un.html, depuis une autre page Le lien saute vers cette ancre. point59baaeaf69a9f8e28ce84a8d935b5ebaSaute à a.add5db79b134e9f6b82c0b36e0489ee08ed
3 Cliquez sur le lien pour déclencher l'événement js et passez à l'ancre en même temps Cliquez. , il y a deux façons de le gérer :
La première :
de348a754106d073e6fc33e6b97d532e déclenchez la fonction d'ajout et passez à l'ancre d'ajout5db79b134e9f6b82c0b36e0489ee08ed ;
Le deuxième type :
70eca6789c67d3832bfb1d0d908d6e0fa0586c6af6e275ce5e5474c26327430394b3e26ee717c64999d7867364b1b4a34263d895a63d87b4c0aaee0a5fec1a2a
3a9badff1b4e8850784e83015b3e70c5Effet d'ancrage via scrollIntoView5db79b134e9f6b82c0b36e0489ee08ed 🎜>
Il existe plusieurs façons de définir le positionnement de l'ancre en HTML. Utilisez le positionnement de l'identifiant, utilisez le positionnement du nom et utilisez le positionnement js. Ces méthodes ne sont pas nécessairement les plus complètes. suivant.
1. Utilisez l'identifiant pour localiser :
Un tel positionnement peut être effectué pour n'importe quelle balise.
<a href="#1F" name="1F">锚点1</a> <p name="1F"> <p> 11111111111 </br> 11111111111 </br>11111111111 </br>11111111111 </br>11111111111 </br> </p> </p>
2. Utiliser le positionnement du nom :
L'utilisation de l'attribut name ne peut positionner que la balise a, mais elle ne peut pas positionner d'autres balises telles que p.
<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. Utiliser le positionnement js
实例：<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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!