ให้ฉันสรุปสถานการณ์ต่าง ๆ ของจุดควบคุม:
1. บนพื้นผิวหน้าเดียวกัน
<a name = add> </a> <!-กำหนดจุดยึดจุด-> <a href =#add> กระโดดเพื่อเพิ่ม </a>
2. ในหน้าต่าง ๆ จุดยึดจะอยู่ในตำแหน่ง A.HTML และกระโดดข้ามจากลิงค์ของหน้าอื่นไปยังจุดยึดนี้
<a href = a.html#add> ข้ามไปที่ a.add </a>
3. คลิกที่ลิงค์เพื่อเรียกเหตุการณ์ JS และข้ามไปยังจุดยึดในเวลาเดียวกัน
ประเภทแรก:
<a href =#add onclight = add ()> ทริกเกอร์ฟังก์ชันเพิ่มและข้ามไปที่จุดยึดเพิ่ม </a>
ประเภทที่สอง:
<div id = divnode> <!-เนื้อหา-> </div> <!-สมมติว่าโหนดที่ต้องกระโดด-> <a href =# onclick = document.getelemetnbyid ('divnode') เท็จ;> ตระหนักถึงเอฟเฟกต์จุดยึดผ่าน Scrolliintoview </a>มีวิธีการหลายวิธีในการตั้งค่าตำแหน่งสมอใน HTML
1. ใช้การวางตำแหน่ง ID:
<a href =#1f name = 1f> จุดยึด 1 </a> <ชื่อ div = 1f> <p> 11111111111 </br> 111111111111 </br> 1111111111 </br> 1111111111111111111111111111111111111111111111111111111111111111111111111111 > </p> </div>
การวางตำแหน่งดังกล่าวสามารถอยู่ได้สำหรับฉลากใด ๆ
2. ใช้ตำแหน่งชื่อ:
<a href =#5f> จุดยึด 5 </a> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> "
การใช้แอตทริบิวต์ชื่อสามารถอยู่ได้เฉพาะสำหรับแท็ก A และแท็กอื่น ๆ เช่น DIV ไม่สามารถจัดตำแหน่งได้
3. ใช้ตำแหน่ง JS
<li class = onclick = javascript: document.getElementById ('ที่นี่')ตัวอย่าง:
JS Anchor Point การวางตำแหน่งที่ราบรื่น
<! {Font-Size: 16px; } div.test p {ความสูง: 400px; ) 0: v;} //? หัว); + (e.currentstyle? intval (E.CurrenStyle.BordrtopWidth): 0); E = E.OffSetParent; E.Currensttyle.Bordrtopwidth): 0); return {x: l, y: t, w: h, h: h ,, wb: wb, hb: hb: hb};}; var, w, h; ถ้า (document.documentElement &&& documentElement.scrolltop t.documentelement. scrolltop; l = document.documentedlement.scrollleft; w = document.documentelement.scrollwidth; Scrolltop; ระยะเวลา) {if (typeof el! = 'object') {el = document.getElementById (EL);} ถ้า (! = getScroll (); ) {var t = (วันที่ใหม่). getTime (); {z.scroll (zpy, zpx)}, 13); (-math.cos (p * math.pi) / 2) + 0.5) * (zpx -zsl) + zsl; หน้าต่าง. 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-> ส่วนหัว _7 <</strong> <p> </p> </div> <div class = test> <a name = header_5 id = header_5> </a> <strong knowledge = 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 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>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้