اجعل روابط الصفحة نفسها أفضل قليلاً لاستخدامها مع تأثير التمرير السلس الأصلي.

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

سيساعدك هذا الدليل الشامل لمطوري الويب في تنفيذ التمرير السلس باستخدام JavaScript.

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

يمكن أن يؤدي التمرير السلس إلى تحسين تجربة المستخدم لصفحة الويب بعدة طرق:

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

لتنفيذ التمرير السلس ، يمكنك تعديل سلوك التمرير الافتراضي باستخدام JavaScript.

بنية HTML

أولاً ، أنشئ عناصر الترميز اللازمة لمنافذ العرض المختلفة والتنقل للتنقل بينها.

instagram viewer 
html>
<htmllang="en">
<head>
 <metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="./style.css" />
<title>Smooth Scrolling Guide for Web Developerstitle>
head>


<body>
<nav>
<ul>
<li><ahref="#section1">Section 1a>li>
<li><ahref="#section2">Section 2a>li>
<li><ahref="#section3">Section 3a>li>
ul>
nav>


<sectionid="section1">
<h2>Section 1h2>
section>


<sectionid="section2">
<h2>Section 2h2>
section>


<sectionid="section3">
<h2>Section 3h2>
section>


<scriptsrc="./script.js">script>
body>
html>

يتكون HTML هذا من شريط تنقل يحتوي على ثلاث علامات ربط. تحدد خاصية href لكل نقطة ارتساء المعرف الفريد للقسم المستهدف (مثل القسم 1 ، القسم 2 ، القسم 3). هذا يضمن أن كل رابط تنقر عليه ينتقل إلى العنصر الهدف المقابل.

تصميم CSS

بعد ذلك ، قم بتطبيق بعض CSS لجعل الصفحة جذابة ومنظمة بشكل مرئي. أضف ما يلي إلى style.css:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "SegoeUI", Tahoma, Geneva, Verdana, sans-serif;
}


nav {
background: #fff;
box-shadow: 3px 3px 5pxrgba(0, 0, 0, 0.25);
position: sticky;
top: 0;
padding: 30px;
}


navul {
display: flex;
gap: 10px;
justify-content: center;
}


navulli {
list-style: none;
}


navullia {
border-radius: 5px;
border: 1.5pxsolid#909090;
text-decoration: none;
color: #333;
padding: 10px 20px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

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

تنفيذ JavaScript

في أخرى لإضافة رسم متحرك سلس عند النقر فوق علامة الربط ، استخدم طريقة scrollIntoView (). طريقة scrollIntoView () هي أ طريقة جافا سكريبت المضمنة من فئة Element التي تسمح لك بتمرير عنصر إلى المنطقة المرئية من نافذة المتصفح.

عند استدعاء هذه الطريقة ، يقوم المستعرض بضبط موضع التمرير لحاوية العنصر (مثل النافذة أو الحاوية القابلة للتمرير) لجعل العنصر مرئيًا.

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

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

بعد ذلك ، حدد ملف makeLinksSmooth () وظيفة. ابدأ بتحديد علامات الارتساء في التنقل ، حيث سترغب في تعديل سلوكها. بعد ذلك ، كرر كل رابط ، وأضف مستمعًا لحدث النقر الخاص به.

functionmakeLinksSmooth() { 
const navLinks = document.querySelectorAll("nav a"); 
 navLinks.forEach((link) => {
 link.addEventListener("click", smoothScroll);
 });
}

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

احصل على قيمة href لعلامة الارتساء الحالية وقم بتخزينها في متغير. يجب أن تكون هذه القيمة معرّف القسم الهدف ، مع البادئة "#" ، لذا استخدمها لتحديد عنصر القسم عبر محدد الاستعلام (). إذا كان targertElement موجودًا ، فقم بتشغيله انتقل إلى عرض الطريقة وتمرير السلوك "السلس" في معلمة الكائن لإكمال التأثير.

functionsmoothScroll(e) {
 e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId);
if (targetElement) { 
 targetElement.scrollIntoView({ behavior: "smooth", });
 }
}

مع ذلك ، سيتم تمرير صفحة الويب النهائية الخاصة بك بسلاسة إلى كل قسم عند النقر فوق ارتباط:

لزيادة تحسين تجربة التمرير السلس ، يمكنك ضبط جوانب معينة بدقة.

يمكنك ضبط الوضع الرأسي للتمرير باستخدام ملف حاجز خاصية وسيطة الإعدادات. استخدم قيمًا مثل "البداية" أو "المركز" أو "النهاية" لتحديد جزء العنصر الهدف للتمرير إلى:

targetElement.scrollIntoView({ behavior: "smooth", block: "end" });

إضافة تأثيرات التخفيف

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

/* CSS to apply easing effect */
html {
scroll-behavior: smooth;
/* Custom cubic-bezier easing */
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}

تأكد من أن تنفيذ التمرير السلس يعمل باستمرار عبر المتصفحات المختلفة. اختبر وتعامل مع أي مراوغات أو تناقضات خاصة بالمتصفح قد تنشأ.

يمكنك استخدام موقع مثل هل بإمكاني استخدم لاختبار دعم المتصفح عند البناء. ضع في اعتبارك استخدام مكتبة JavaScript أو polyfill لضمان التوافق عبر المستعرضات وتوفير تجربة سلسة لجميع المستخدمين.

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

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