كيفية التمرير إلى عنصر باستخدام JavaScript

أثناء تصفح صفحات الويب ، فإن التمرير إلى عنصر ما يحافظ على تركيز المستخدم من خلال جذب انتباهه لفترة طويلة. يمكن تطبيق هذه الوظيفة عندما يحتاج المستخدم إلى التمرير بنقرة واحدة فقط أو ، في حالة اختبار التشغيل الآلي ، للتحقق من المحتوى المضاف في أسفل الصفحة على الفور. في مثل هذه السيناريوهات ، يضيف التمرير إلى عنصر في JavaScript وظائف ليتم تطبيقها بنقرة واحدة دون الكثير من تفاعل المستخدم ويوفر الوقت.

سيرشدك هذا الدليل إلى التمرير إلى عنصر باستخدام JavaScript.

كيفية التمرير إلى عنصر باستخدام JavaScript؟

للتمرير إلى عنصر باستخدام JavaScript ، يمكنك استخدام:

• • ' انتقل إلى عرض() ' طريقة
  • ' التمرير () ' طريقة
  • ' انتقل إلى() ' طريقة

سيتم توضيح الأساليب المذكورة واحدة تلو الأخرى!

الطريقة الأولى: قم بالتمرير إلى عنصر في JavaScript باستخدام طريقة scrollIntoView ()

ال ' انتقل إلى عرض() ”لتمرير عنصر إلى المنطقة المرئية من Document Object Model (DOM). يمكن تطبيق هذه الطريقة للحصول على HTML المحدد وتطبيق طريقة معينة عليه بمساعدة حدث onclick.

بناء الجملة

في الصيغة المحددة ، ' محاذاة 'يشير إلى نوع المحاذاة.

مثال

في المثال التالي ، أضف العنوان التالي باستخدام '

' بطاقة شعار:

< h2 > انقر فوق الزر للتمرير إلى العنصر. h2 >

الآن ، أنشئ زرًا بعلامة ' عند النقر 'حدث يستدعي الوظيفة' scrollElement () :

< زر عند النقر = 'scrollElement ()' > عنصر التمرير زر >
< ر >

بعد ذلك ، حدد مصدر الصورة ومعرفها ليتم التمرير:

< صورة src = 'review.PNG' هوية شخصية = 'div' >

أخيرًا ، حدد وظيفة باسم ' scrollElement () 'والتي ستجلب العنصر المطلوب باستخدام' document.getElementById () 'وتطبيق طريقة scrollIntoView () عليها من أجل تمرير الصورة:

وظيفة التمرير ( ) {
عنصر var = document.getElementById ( 'div' ) ؛
element.scrollIntoView ( ) ؛
}

كود CSS

في كود CSS ، طبِّق الأبعاد التالية لضبط حجم الصورة بالرجوع إلى معرّف الصورة ' شعبة ':

#div {
الارتفاع: 800 بكسل ؛
العرض: 1200 بكسل ؛
تجاوز: تلقائي ؛
}

سيكون الإخراج المقابل:

الطريقة 2: قم بالتمرير إلى عنصر في JavaScript باستخدام طريقة window.scroll ()

ال ' window.scroll () 'طريقة تمرير النافذة وفقًا لقيم الإحداثيات في المستند. يمكن تنفيذ هذه الطريقة لجلب معرف الصورة ، وتعيين إحداثياتها باستخدام وظيفة ، وتمرير الصورة المحددة.

بناء الجملة

window.scroll ( تنسيق س ، تنسيق ص )

في الصيغة أعلاه ، ' x- تنسيق 'يشير إلى إحداثيات س ، و' ص تنسيق ”يشير إلى إحداثيات ص.

المثال التالي يوضح المفهوم المذكور.

مثال

كرر نفس الخطوات لإضافة العنوان وإنشاء زر وتطبيق حدث onclick وتحديد مصدر الصورة بمعرّفها:

< h2 > انقر فوق الزر للتمرير إلى العنصر. h2 >
< زر عند النقر = 'scrollElement ()' > عنصر التمرير زر >
< ر >
< صورة src = 'image.PNG' هوية شخصية = 'div' >

بعد ذلك ، حدد وظيفة باسم ' scrollElement () '. هنا ، سنقوم بتعديل الإحداثيات باستخدام ' window.scroll () 'من خلال الوصول إلى الوظيفة المسماة' موقع() 'وتطبيقه على عنصر الصورة الذي تم جلبه:

وظيفة التمرير ( ) {
window.scroll ( 0 ، موقع ( document.getElementById ( 'div' ) ) ) ؛
}

بعد ذلك ، حدد وظيفة باسم ' موقع() 'بأخذ متغير obj كحجة لها. أيضًا ، قم بتطبيق ' تعويض '، والتي ستصل إلى أقرب سلف ليس له موضع ثابت ويعيده. بعد ذلك ، قم بزيادة القيمة القصوى الحالية التي تمت تهيئتها بمساعدة ' تعويض 'التي ستعيد الموضع العلوي فيما يتعلق بالأصل (offsetParent) وإرجاع قيمة' القمة الحالية 'عندما يتم تقييم الشرط المضاف على أنه صحيح:

وظيفة موقع ( الهدف ) {
حيث currenttop = 0 ؛
إذا ( obj.offset ) {
فعل {
Currenttop + = obj.offsetTop ؛
} في حين ( ( obj = obj.offsetParent ) ) ؛
إرجاع [ تيار ] ؛
}
}

أخيرًا ، صمم الحاوية التي تم إنشاؤها وفقًا لمتطلباتك:

#div {
الارتفاع: 1000 بكسل ؛
العرض: 1000 بكسل ؛
تجاوز: تلقائي ؛
}

انتاج |

الطريقة الثالثة: قم بالتمرير إلى عنصر في JavaScript باستخدام طريقة scrollTo ()

ال ' انتقل إلى() 'طريقة تمرير المستند المحدد إلى الإحداثيات المعينة. يمكن تطبيق هذه الطريقة بالمثل للحصول على العنصر باستخدام معرفه وتنفيذ الوظيفة المطلوبة لتمرير صورة معينة على DOM.

بناء الجملة

window.scrollTo ( س وص )

هنا، ' x ' و ' ص 'إلى إحداثيات x و y.

الق نظرة على المثال التالي.

مثال

أولاً ، كرر الخطوات التي تمت مناقشتها أعلاه لإضافة عنوان وزر بحدث onclick وصورة على النحو التالي:

< h2 > انقر فوق الزر للتمرير إلى العنصر. h2 >
< زر عند النقر = 'scrollElement ()' > عنصر التمرير زر >
< ر >
< IMG src = 'image.JPG' هوية شخصية = 'div' >

بعد ذلك ، حدد وظيفة باسم ' scrollElement () 'وقم بتعيين التمرير عن طريق استدعاء طريقة Position () في طريقة scrollTo ():

وظيفة التمرير ( ) {
window.scrollTo ( 0 ، موقع ( document.getElementById ( 'div' ) ) ) ؛
}

أخيرًا ، حدد وظيفة تسمى Position () وطبق بالمثل الخطوات الموضحة أعلاه لتعيين إحداثيات الصورة المحددة:

وظيفة موقع ( الهدف ) {
حيث currenttop = 0 ؛
إذا ( obj.offset ) {
فعل {
Currenttop + = obj.offsetTop ؛
} في حين ( ( obj = obj.offsetParent ) ) ؛
إرجاع [ تيار ] ؛
}
}

انتاج |

لقد ناقشنا جميع الطرق الملائمة للتمرير إلى عنصر باستخدام JavaScript.

استنتاج

للتمرير إلى عنصر في JavaScript ، استخدم ' انتقل إلى عرض() 'للوصول إلى العنصر وتطبيق الوظيفة المحددة ، فإن' window.scroll () 'لجلب العنصر ، وتعيين إحداثياته ​​باستخدام وظيفة ، وتمرير الصورة ، أو استخدام' انتقل إلى() 'لجلب العنصر وتمريره وفقًا لذلك. توضح هذه المدونة مفهوم التمرير إلى عنصر باستخدام JavaScript.