Trois méthodes d'implémentation des points d'ancrage HTML

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

<!-- Définir le point d'ancrage --&gt ;

Sauter pour ajouter

2 Dans différentes pages, le point d'ancrage est positionné dans un.html, depuis une autre page Le lien saute vers cette ancre. point Saute à a.add 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 : déclenchez la fonction d'ajout et passez à l'ancre d'ajout ; Le deuxième type :

Effet d'ancrage via scrollIntoView 🎜>

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.

锚点1 11111111111 11111111111 11111111111 11111111111 11111111111

Copier après la connexion 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.

锚点5 1111111 Copier après la connexion 3. Utiliser le positionnement js

Copier après la connexion 实例：

js 锚点平滑定位 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; } 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); } header_1 --> header_4

header_2 --> header_5

header_3 --> header_6

header_4 --> header_7

header_5 --> header_3

header_6 --> header_2

header_7 --> header_1

Copier après la connexion