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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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