HTML 앵커 포인트의 세 가지 구현 방법

앵커는 웹페이지, 특히 긴 페이지에서 자주 사용됩니다. 이제 PHP 중국어 웹사이트에서는 html 앵커의 세 가지 구현 방법을 소개합니다. 1. 같은 페이지에서

<!-- 앵커 포인트 정의 --&gt ;

추가로 이동

2. 다른 페이지에서는 앵커 포인트가 a.html에 위치하며, 다른 페이지에서는 링크가 이 앵커로 이동합니다. a.add로 이동합니다 3. 링크를 클릭하면 js 이벤트가 실행되고 동시에 앵커로 이동합니다. 이를 처리하는 방법에는 두 가지가 있습니다. 첫 번째 방법: 추가 기능을 트리거하고 추가 앵커로 점프합니다 두 번째 유형:

scrollIntoView를 통한 앵커 효과 >

HTML에서 앵커 위치 지정을 설정하는 방법에는 ID 위치 지정 사용, 이름 위치 지정 사용, js 위치 지정 사용이 반드시 가장 포괄적인 것은 아닙니다. .

1. 다음을 찾으세요:

锚点1 11111111111 11111111111 11111111111 11111111111 11111111111

로그인 후 복사

이런 종류의 위치 지정은 모든 태그를 대상으로 할 수 있습니다.

2. 이름 위치 사용:

锚点5 1111111 로그인 후 복사 name 속성을 사용하면 a 태그만 배치할 수 있고 p 등 다른 태그는 배치할 수 없습니다. 3. js 위치 지정 사용

로그인 후 복사 实例：

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

로그인 후 복사