Izinkan saya merangkum beberapa situasi titik kontrol:
1. Di permukaan halaman yang sama
<A name = add> </a> <!-Tentukan point anchor-> <a href =#add> lompat untuk menambahkan </a>
2. Di halaman yang berbeda, titik jangkar diposisikan dalam A.html, dan lompatan lompatan dari tautan halaman lain ke titik jangkar ini
<A href = a.html#add> lompat ke a.add </a>
3. Klik tautan untuk memicu acara JS dan melompat ke titik jangkar secara bersamaan.
Tipe pertama:
<A href =#add Onclight = add ()> memicu fungsi add dan lompat ke titik tambah jangkar </a>
Tipe kedua:
<Div ID = DivNode> <!-Content-> </Div> <!-Dengan asumsi node yang perlu dilompati-> <a href =# onclick = document.getelemetnbyId ('divnode') false;> sadari efek titik jangkar melalui scrolliintoview </a>Ada beberapa metode untuk mengatur posisi jangkar di HTML.
1. Gunakan penentuan posisi ID:
<A href =#1f name = 1f> titik jangkar 1 </a> <Div name = 1f> <p> 11111111111 </br> 111111111111 </br> 1111111111 </br> 111111111111111111111 > </p> </div>
Posisi seperti itu dapat ditempatkan untuk label apa pun.
2. Gunakan penentuan posisi nama:
<A href =#5f> titik jangkar 5 </a> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> "
Menggunakan atribut nama hanya dapat ditempatkan untuk tag A, dan tag lain seperti div tidak dapat diposisikan.
3. Gunakan penentuan posisi JS
<Li class = OnClick = JavaScript: document.geteLementById ('here').Contoh:
Js Anchor Point Smooth Positioning
<! {font-size: 16px; } Div.test p {height: 400px; )? kepala); + (E.Currentstyle? Intval (E.CurrenStyle.Bordrtopwidth): 0); e.currensttyle.bordrtopwidth): 0); var, w, h; if (document.documentedElement &&& documentElement.scrolltop t.documentElement. scrolltop; l = document.documentedlement.scrollleft; w = document.documentelement.scrollwidth; lain jika (document.body) {t = document.body. scrolltop; l = document.body , Durasi) {if (typeof el! = 'Objek') {el = document.geteLementById (el);} if (! EL); = Getaran (); ) {var t = (tanggal baru) .getTime (); {z.scroll (zpy, zpx)}, 13); (-Math.cos (p * math.pi) / 2) + 0.5) * (zpx -zsl) + zsl; Window .scrollto (l, t)}; > <a name = header_1 id = header_1> </a> <strong onclick = javascript: scroller ('header_4', 800);> header_1- header_4 </p> </p> </div> </div> </div> div class = test> <a name = header_2 id = header_2> </a> <strong onclick = javascript: scroller ('header_5', 800);> header_2- header_5 </strong> </p > </div> <div class = test> <a name = header_3 id = header_3> </a> <strong onclick = javaScript: scroller ('header_6', 800); class = test> <a name = header_4 id = header_4> </a> <strong onclick = javascript: scroller ('header_7', 800);> header_4- header _7 <</strong> <p> </p> </div> <div class = test> <a name = header_5 id = header_5> </a> <kokoh pengetahuan = javascript: scroller ('header_3', 800); /p> </div> <div class = test> <a name = header_6 id = header_6> </a> <strong onclick = javascript: scroller ('header_2', 800);> header_6-> header_2 </strong > <p> </p> </div> <div class = test> <a name = header_7 id = header_7> </a> <strong onclick = javascript: scroller ('header_1', 800);> header_7-> Header_1 </strong> <p> </p> </body> </html>Di atas adalah semua isi artikel ini.