הפוך את הקישורים שלך באותו עמוד לנעימים יותר לשימוש עם אפקט גלילה חלקה מקורי זה.

גלילה חלקה היא טכניקה המשמשת בפיתוח אתרים כדי ליצור חווית גלילה זורמת למשתמשים. זה משפר את הניווט בתוך דף אינטרנט על ידי הנפשת תנועת הגלילה במקום קפיצת ברירת המחדל הפתאומית.

מדריך מקיף זה למפתחי אתרים יעזור לך ליישם גלילה חלקה באמצעות 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() היא a שיטת JavaScript מובנית של המחלקה 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() פונקציה שלוקחת אובייקט מאזין אירועים. קרא preventDefault() כדי לוודא שהדפדפן לא מבצע את פעולת ברירת המחדל שלו כאשר אתה לוחץ על הקישור. הקוד הבא יחליף אותו.

תפוס את ערך ה-href של תג העוגן הנוכחי ואחסן אותו במשתנה. ערך זה צריך להיות המזהה של קטע היעד, עם הקידומת "#", אז השתמש בו כדי לבחור את הרכיב של הקטע באמצעות querySelector(). אם targetElement קיים, הפעל אותו גלול לתוך התצוגה שיטה ולהעביר את ההתנהגות ה"חלקה" בפרמטר אובייקט להשלמת האפקט.

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.

כוונון עדין של התנהגות הגלילה, הוספת אפקטים מקלים והבטחת תאימות בין דפדפנים לשפר עוד יותר את חוויית הגלילה החלקה, מה שהופך את דפי האינטרנט שלך למושכים יותר ומהנים יותר לנווט.