วิธีเลื่อนไปที่องค์ประกอบโดยใช้ JavaScript

ขณะท่องเว็บ การเลื่อนไปยังองค์ประกอบทำให้ผู้ใช้จดจ่ออยู่กับการดึงดูดความสนใจเป็นเวลานาน ฟังก์ชันนี้สามารถใช้ได้เมื่อผู้ใช้ต้องการเลื่อนโดยใช้คลิกเดียวเท่านั้น หรือในกรณีของการทดสอบอัตโนมัติ เพื่อตรวจสอบเนื้อหาที่เพิ่มที่ด้านล่างของหน้าทันที ในสถานการณ์เช่นนี้ การเลื่อนไปยังองค์ประกอบใน JavaScript จะเพิ่มฟังก์ชันการทำงานให้ใช้งานได้ในคลิกเดียวโดยไม่ต้องโต้ตอบกับผู้ใช้มากนักและช่วยประหยัดเวลา

คู่มือนี้จะแนะนำให้คุณเลื่อนไปยังองค์ประกอบโดยใช้ JavaScript

จะเลื่อนไปที่องค์ประกอบโดยใช้ JavaScript ได้อย่างไร

ในการเลื่อนไปยังองค์ประกอบโดยใช้ JavaScript คุณสามารถใช้:

• • “ scrollIntoView() ' กระบวนการ
  • “ เลื่อน() ' กระบวนการ
  • “ เลื่อนไปที่() ' กระบวนการ

วิธีการดังกล่าวจะแสดงให้เห็นทีละภาพ!

วิธีที่ 1: เลื่อนไปที่องค์ประกอบใน JavaScript โดยใช้ scrollIntoView() Method

“ scrollIntoView() ” วิธีการเลื่อนองค์ประกอบไปยังพื้นที่ที่มองเห็นได้ของ Document Object Model (DOM) วิธีนี้สามารถใช้เพื่อรับ HTML ที่ระบุและใช้วิธีเฉพาะกับมันด้วยความช่วยเหลือของเหตุการณ์ onclick

ไวยากรณ์

ในไวยากรณ์ที่กำหนด “ align ” หมายถึงประเภทการจัดตำแหน่ง

ตัวอย่าง

ในตัวอย่างต่อไปนี้ ให้เพิ่มหัวข้อต่อไปนี้โดยใช้ปุ่ม “

” แท็ก:

< ชั่วโมง2 > คลิกปุ่มเพื่อเลื่อนไปที่องค์ประกอบ ชั่วโมง2 >

ตอนนี้สร้างปุ่มที่มี“ เมื่อคลิก ” เหตุการณ์ที่เรียกใช้ฟังก์ชัน “ scrollElement() :

< ปุ่ม เมื่อคลิก = 'องค์ประกอบเลื่อน ()' > เลื่อนองค์ประกอบ ปุ่ม >
< br >

หลังจากนั้น ระบุแหล่งที่มาของภาพและรหัสเพื่อเลื่อน:

< ภาพ src = 'รีวิว.PNG' id = 'ดิวิ' >

สุดท้ายกำหนดฟังก์ชั่นชื่อ “ scrollElement() ” ซึ่งจะดึงองค์ประกอบที่จำเป็นโดยใช้ “ document.getElementById() ” และใช้เมธอด scrollIntoView() เพื่อเลื่อนภาพ:

การทำงาน scrollElement ( ) {
var องค์ประกอบ = document.getElementById ( 'ดิวิ' ) ;
element.scrollIntoView ( ) ;
}

CSS Code

ในโค้ด CSS ใช้มิติข้อมูลต่อไปนี้เพื่อปรับขนาดรูปภาพโดยอ้างอิงจากรหัสรูปภาพ ' div ”:

#div{
ความสูง: 800px;
ความกว้าง: 1200px;
ล้น: อัตโนมัติ;
}

ผลลัพธ์ที่สอดคล้องกันจะเป็น:

วิธีที่ 2: เลื่อนไปที่องค์ประกอบใน JavaScript โดยใช้ window.scroll() Method

“ window.scroll() ” วิธีการเลื่อนหน้าต่างตามค่าพิกัดในเอกสาร วิธีนี้สามารถนำมาใช้เพื่อดึงรหัสรูปภาพ ตั้งค่าพิกัดโดยใช้ฟังก์ชัน และเลื่อนรูปภาพที่ระบุ

ไวยากรณ์

window.scroll ( x-coord, y-coord )

ในไวยากรณ์ข้างต้น “ x-coord ” หมายถึงพิกัด X และ “ y-coord ” หมายถึงพิกัด Y

ตัวอย่างต่อไปนี้อธิบายแนวคิดที่ระบุไว้

ตัวอย่าง

ทำซ้ำขั้นตอนเดียวกันเพื่อเพิ่มหัวเรื่อง สร้างปุ่ม ใช้เหตุการณ์ onclick และระบุแหล่งที่มาของภาพด้วยรหัส:

< ชั่วโมง2 > คลิกปุ่มเพื่อเลื่อนไปที่องค์ประกอบ ชั่วโมง2 >
< ปุ่ม เมื่อคลิก = 'องค์ประกอบเลื่อน ()' > เลื่อนองค์ประกอบ ปุ่ม >
< br >
< ภาพ src = 'ภาพ.PNG' id = 'ดิวิ' >

ถัดไป กำหนดฟังก์ชันชื่อ “ scrollElement() ” ที่นี่เราจะปรับพิกัดโดยใช้ปุ่ม “ window.scroll() ” โดยเข้าไปที่ฟังก์ชั่นชื่อ “ ตำแหน่ง() ” และนำไปใช้กับองค์ประกอบภาพที่ดึงมา:

การทำงาน scrollElement ( ) {
window.scroll ( 0 , ตำแหน่ง ( document.getElementById ( 'ดิวิ' ) ) ) ;
}

หลังจากนั้นให้กำหนดฟังก์ชั่นชื่อ “ ตำแหน่ง() ” รับตัวแปร obj เป็นอาร์กิวเมนต์ ยังใช้ “ offsetParent ” ทรัพย์สินซึ่งจะเข้าถึงบรรพบุรุษที่ใกล้ที่สุดที่ไม่มีตำแหน่งคงที่และส่งคืน จากนั้น เพิ่มค่าสูงสุดปัจจุบันเริ่มต้นโดยใช้ปุ่ม ' offsetTop ” คุณสมบัติที่จะส่งคืนตำแหน่งบนสุดเมื่อเทียบกับ parent(offsetParent) และคืนค่าของ “ ด้านบนปัจจุบัน ” เมื่อเงื่อนไขเพิ่มเติมถูกประเมินว่าเป็นจริง:

การทำงาน ตำแหน่ง ( วัตถุ ) {
โดยที่ currenttop = 0 ;
ถ้า ( obj.offsetParent ) {
ทำ {
currenttop += obj.offsetTop;
} ในขณะที่ ( ( obj = obj.offsetParent ) ) ;
กลับ [ ปัจจุบันท็อป ] ;
}
}

สุดท้าย จัดรูปแบบคอนเทนเนอร์ที่สร้างขึ้นตามความต้องการของคุณ:

#div{
ความสูง: 1000px;
ความกว้าง: 1000px;
ล้น: อัตโนมัติ;
}

เอาท์พุต

วิธีที่ 3: เลื่อนไปที่องค์ประกอบใน JavaScript โดยใช้ scrollTo() Method

“ เลื่อนไปที่() ” วิธีการเลื่อนเอกสารที่ระบุไปยังพิกัดที่กำหนด วิธีนี้สามารถทำได้เช่นเดียวกันเพื่อรับองค์ประกอบโดยใช้รหัสและดำเนินการฟังก์ชันที่จำเป็นเพื่อเลื่อนรูปภาพเฉพาะบน DOM

ไวยากรณ์

window.scrollTo ( x และ y )

ที่นี่, ' x ' และ ' Y ” ชี้ไปที่พิกัด x และ y

ลองดูตัวอย่างต่อไปนี้

ตัวอย่าง

ขั้นแรก ทำซ้ำขั้นตอนที่กล่าวถึงข้างต้นเพื่อเพิ่มหัวเรื่อง ปุ่มที่มีเหตุการณ์ onclick และรูปภาพดังนี้:

< ชั่วโมง2 > คลิกปุ่มเพื่อเลื่อนไปที่องค์ประกอบ ชั่วโมง2 >
< ปุ่ม เมื่อคลิก = 'องค์ประกอบเลื่อน ()' > เลื่อนองค์ประกอบ ปุ่ม >
< br >
< img src = 'ภาพ.JPG' id = 'ดิวิ' >

ถัดไป กำหนดฟังก์ชันชื่อ “ scrollElement() ” และตั้งค่าการเลื่อนโดยเรียกใช้เมธอด Position() ในเมธอด scrollTo():

การทำงาน scrollElement ( ) {
window.scrollTo ( 0 , ตำแหน่ง ( document.getElementById ( 'ดิวิ' ) ) ) ;
}

สุดท้าย ให้กำหนดฟังก์ชันชื่อ Position() และใช้ขั้นตอนที่กล่าวถึงข้างต้นในการตั้งค่าพิกัดของภาพที่ระบุในทำนองเดียวกัน:

การทำงาน ตำแหน่ง ( วัตถุ ) {
โดยที่ currenttop = 0 ;
ถ้า ( obj.offsetParent ) {
ทำ {
currenttop += obj.offsetTop;
} ในขณะที่ ( ( obj = obj.offsetParent ) ) ;
กลับ [ ปัจจุบันท็อป ] ;
}
}

เอาท์พุต

เราได้พูดถึงวิธีการที่สะดวกสบายทั้งหมดในการเลื่อนไปยังองค์ประกอบโดยใช้ JavaScript

บทสรุป

ในการเลื่อนไปยังองค์ประกอบใน JavaScript ให้ใช้ “ scrollIntoView() ” เพื่อเข้าถึงองค์ประกอบและใช้ฟังก์ชันที่ระบุ “ window.scroll() ” วิธีดึงองค์ประกอบ ตั้งค่าพิกัดโดยใช้ฟังก์ชัน และเลื่อนภาพ หรือใช้ “ เลื่อนไปที่() ” เพื่อดึงองค์ประกอบและเลื่อนตามนั้น บล็อกนี้สาธิตแนวคิดในการเลื่อนไปยังองค์ประกอบโดยใช้ JavaScript