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

في هذه المقالة، سنستكشف طريقتين لتنفيذ التمرير السلس:

• استخدام CSS
• استخدام جافا سكريبت

دعونا نتعمق أولاً في استخدام CSS للتمرير السلس.

لماذا CSS للتمرير السلس؟

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

الخطوة 1: إنشاء شريط التنقل

أولاً، لنقم بإنشاء شريط تنقل بسيط يحتوي على روابط التنقل الخاصة بنا. ستنقل هذه الروابط المستخدمين إلى أقسام محددة في الصفحة.

تأكد من أن روابط التنقل هي علامات ربط، لأنها تتيح لنا الانتقال بسهولة إلى أقسام معينة من الصفحة.

الخطوة 2: إنشاء الأقسام
الآن بعد أن أصبح لدينا روابط التنقل الخاصة بنا، فلنقم بإنشاء الأقسام المقابلة.

لقد أنشأنا أقسامًا لكل رابط تنقل.

الخطوة 3: إضافة محتوى قابل للتمرير
لكي يعمل التمرير بسلاسة، تحتاج صفحتك إلى محتوى كافٍ للتمرير. دعونا نضيف بعض النص الوهمي لجعل الصفحة قابلة للتمرير.

أخيرًا لدينا محتوى كافٍ لجعل صفحتنا قابلة للتمرير.

الخطوة 4: ربط التنقل بالأقسام
سنستخدم السمة href لعلامة الارتساء للإشارة إلى الأقسام التي نريد التمرير إليها. ما عليك سوى إضافة # متبوعًا بمعرف القسم المقابل.

إذن ما نفعله بشكل أساسي من الصورة أعلاه هو استخدام سمة href للإشارة إلى القسم الذي نريد أن تنتقل إليه روابط التنقل الخاصة بنا.

الخطوة 5: قم بتعيين المعرف (المعرف) المناسب للقسم المناسب

إذن ما فعلناه الآن هو ببساطة تعيين كل رابط إلى القسم المناسب له باستخدام السمة والمعرفات href. لذلك، سيتم مطابقة رابط التنقل الذي يحتوي على href لـ #section-one مع قسم من id section-one

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

الخطوة 6: إضافة التمرير السلس باستخدام CSS
لتمكين التمرير السلس، أضف خاصية CSS واحدة إلى عنصر html.

عندما نضيف خاصية سلوك التمرير إلى HTML الخاص بنا، يمكننا أن نشهد تأثير التمرير السلس عند النقر على رابط التنقل الخاص بنا.

كيفية العمل

تحت الغطاء، يتم استخدام السمة href في علامة الارتساء بشكل تقليدي للتنقل إلى الصفحات الخارجية أو عناوين URL. ومع ذلك، عند إقرانها بـ # متبوعًا بمعرف القسم، فإن علامة الارتساء "تظهر" داخل الصفحة الحالية ويتم تمريرها إلى القسم المقابل. عن طريق إضافة سلوك التمرير: ناعم؛ خاصية CSS، نقوم بإنشاء انتقال سلس بين الأقسام، مما يعزز تجربة المستخدم الشاملة.

الطريقة الأخرى التي يمكننا من خلالها تحقيق التمرير السلس هي استخدام JavaSCRIPT للتعامل معه.
يمكننا أيضًا تحقيق ذلك في بضع خطوات فقط:

ملاحظة: سيظل كل قسم يحمل المعرف المخصص كما كان من قبل.

الخطوة 1: إنشاء وظيفة التمرير إلى العرض

يمكننا إنشاء دالة في جافا سكريبت تستخدم طريقة التمرير إلى عرض لتحقيق نفس النتيجة. مثل ذلك:

الخطوة 2: تضمين الوظيفة عند النقر فوق الرابط

سنقوم بتضمين وظيفة التمرير في مستمع الحدث المرفق بكل رابط تنقل. بهذه الطريقة، عند النقر على الرابط، تنتقل الصفحة بسلاسة إلى القسم المشار إليه.

يمكن أيضًا إعادة هيكلة هذا اعتمادًا على إطار العمل الذي تستخدمه للتطوير.

هاتان طريقتان بسيطتان يمكننا من خلالهما تحقيق التمرير السلس عند إنشاء صفحات ويب بديهية.

اترك تعليقًا إذا كان لديك سؤال أو تعليق.