เป็นไปได้หรือไม่ที่จะสร้างการเชื่อมโยงหลายมิติไปยังตำแหน่งการเลื่อนเฉพาะบนเว็บเพจ? ตัวอย่างเช่นฉันต้องการสร้างลิงก์ไปที่http://www.stackoverflow.com/แต่หน้าเลื่อนลง 100 พิกเซล
คำตอบ:
คุณสามารถเลื่อนไปยังตำแหน่งที่กำหนดโดยใช้ปลั๊กอิน jQuery scrollTo หากคุณดูที่หน้าตัวอย่างคุณจะเห็นว่าปลั๊กอินนั้นมีความสามารถในตัวเลือกต่าง ๆ มากมายรวมถึงการเลื่อนไปยังตำแหน่งที่แน่นอน นั่นหมายความว่าคุณต้องควบคุม JavaScript ของเป้าหมายดังนั้นสิ่งนี้อาจไม่เหมาะสำหรับลิงก์ไปยังไซต์ภายนอก
การเชื่อมโยงทางวานิลลาไปที่ไหนสักแห่งในหน้าผ่านจุดยึดที่มีอยู่แล้วในหน้า
สิ่งนี้สามารถสร้างได้โดยใช้<a>…</a>แท็ก โปรดทราบว่าลิงก์ที่ระบุใน "จุดยึด" (ด้านบน) มี#h-12.2ที่ส่วนท้าย สิ่งนี้สอดคล้องกับการ<a id="h-12.2">12.2</a>ฝังใน HTML ที่สร้างหน้าและเมื่อคลิกจะเปลี่ยนตำแหน่งมุมมองหน้าไปที่จุดยึดนี้
โปรดทราบว่าก่อนหน้า HTML5 จะมีการใช้nameแอตทริบิวต์ในแท็ก anchor แต่ไม่ได้รับการสนับสนุนอีกต่อไปและidควรใช้แอตทริบิวต์นั้นแทน ( การอ้างอิง ) นอกจากนี้ยังหมายความว่าคุณสามารถใช้องค์ประกอบใด ๆ สำหรับแท็กจุดยึดคุณไม่ จำกัด<a>องค์ประกอบ
เช่นเดียวกับคำตอบของ Paul คุณสามารถเชื่อมโยงไปยังการเกิดขึ้นครั้งแรกของรหัสแท็กในเอกสาร HTML แม้ว่าจะไม่เป็นจำนวนพิกเซลที่แน่นอน
ยกตัวอย่างเช่นการเชื่อมโยง / เลื่อนไปยังหน้านี้คำถามหรือคำตอบ
ลองคลิกขวาและตรวจสอบองค์ประกอบบนหน้า คุณจะพบ<a>แท็กเหล่านี้คือจุดยึด
จากนั้นนำออกมา<ก่อนและลำดับสุดท้ายaเพื่อไม่ให้ปรากฏเป็นลิงก์ คุณสามารถเห็นเอฟเฟกต์ขณะเขียนในกล่องโต้ตอบเมื่อมันแสดงตัวอย่างด้านล่าง
a href="/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>
และ
a href="/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers">answers /a>
อย่างที่คุณเห็นความแตกต่างเพียงอย่างเดียวคือจุดสิ้นสุดที่จุดยึดชื่อตาม#สัญลักษณ์ปอนด์ ( ) ชื่อหลัง>คือสำหรับวิธีที่ลิงก์อ่านถึงผู้ใช้
ในกรณีนี้ "ส่วนหัวคำถาม" จะอ่านว่า "คำถาม" และคำตอบก็เหมือนกัน
แล้วต่อไปนี้ควรจะเชื่อมโยงไปยังความคิดเห็นของไมค์ เนื่องจากจุดยึดของพวกเขาคือ382094
ในการชี้แจงคุณสามารถค้นหาจุดยึดและเพิ่ม#ลิงก์หลังของคุณ
/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header
/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers
/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#880079
สิ่งเหล่านี้จะพาคุณไปยังสถานที่ต่าง ๆ ในหน้าเดียวกัน
หากต้องการลิงก์ไปยังตำแหน่งที่ระบุพิกเซลบนหน้าเว็บให้วางแท็กจุดยึดใน div ที่อยู่ในตำแหน่งอย่างแน่นอนโดยใช้พิกัด "top: x left: y"
คุณสามารถใช้Citebiteเพื่อลิงค์ไปยังตำแหน่งเฉพาะของหน้าเว็บได้แม้ว่าจะไม่ได้ใช้ id ในตำแหน่งนั้น มันใช้งานง่าย เพียงไปที่ลิงก์ที่ฉันให้ไว้ที่นี่จากนั้นวางข้อความที่คุณต้องการให้แสดงเป็นอันดับแรกหลังจากไปที่หน้าเว็บของคุณในฟิลด์ข้อความอ้างอิงจากนั้นให้ลิงก์ของหน้าเว็บในฟิลด์ข้อความ URL ต้นฉบับ จากนั้นคลิกเพื่อสร้าง Citebite จากนั้นมันจะสร้างลิงค์ ลิงค์นั้นจะเป็นลิงค์ที่คุณต้องการ