בתקופה האחרונה ישנם הרבה אתרים אשר מציגים מעין בר התקדמות בראש הדפדפן אשר מציג את התקדמות הגלילה של העמוד, לרוב זה משתמש כאמצעי להעלאת חווית המשתמש ע״י הצגת התקדמות הגלילה של הגולש.
בניית פס התקדמות
במאמר זה נלמד כיצד לבנות את הקוד הרלוונטי לצורך הצגת הפס ועדכון התקדמות הגלילה ע״י חישוב מרחק הגלילה ביחס לגובה המסמך. את הקוד ניתן להטמיע בכל אתר קיים, ואף ניתן להוריד את הקוד בתצורת תוסף אותו ניתן להתקין באתר וורדפרס.
קוד HTML
בשלב הראשון עלינו לבנות את הקוד אשר יהווה את פס ההתקדמות באתר שלנו, יש להעתיד את הקוד ולשים אותו בין התגיות <body> ו-</body>, אני ממליץ לשים את זה ממש בסוף לפני תגית הסגירה </body>.
<div class='dorzki-scroll-indicator-wrapper'>
<div class='scroll-bar'></div>
</div>קוד CSS
בשלב הבא נוסיף טיפה עיצוב לפס, זאת על מנת להצמיד אותו לראש העמוד, ולתת לו צבע וגובה, את הקוד יש להעתיד לאחד מקבצי ה-CSS של האתר או לשים אותו בקובץ חדש ולקשר אותו בתגית <head>.
.dorzki-scroll-indicator-wrapper {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
}
.dorzki-scroll-indicator-wrapper .scroll-bar {
width: 0;
height: 5px;
background-color: #0073aa;
}קוד JavaScript
בשלב האחרון עלינו להוסיף את הפונקציונליות, בתור התחלה אנו בונים פונקציה אשר תחשב את אחוז ההתקדמות לפי מיקום הגולש בעמוד ביחס לגובה העמוד (פחות גובה המסך), מה שיתן לנו את אחוז ההתקדמות של הגלילה.
(גובה הדף – גובה המסך) / מרחק הגלילה מראשית העמוד = אחוז ההתקדמות
יש להעתיק את קוד ולהדביק אותו באחד מקבצי ה-JavaScript של האתר, או ליצור קובץ חדש ולקשר אותו לאתר. שימו לב כי הקוד משתמש בפונקציות של jQuery, לכן יש לוודא שיש לכם jQuery באתר (אם אתם באתר וורדפרס, אז הסיפרייה קיימת).
(function ( $ ) {
function scrollIndicator() {
let _scroll = $( window ).scrollTop();
let _height = $( document ).height() - $( window ).height();
$( '.dorzki-scroll-indicator-wrapper .scroll-bar' )
.css( 'width', (_scroll / _height * 100) + '%' );
}
$( window ).scroll( scrollIndicator );
})( jQuery );התוצאה
סיכום
הוספת בר התקדמות גלילה יכול לשפר במעט את חווית המשתמש של הגולש באתר שלכם, במיוחד כאשר מדובר על אתר אשר כולל הרבה תוכן בעמודים. עם מעט שינויים והתאמות בקוד אפשר לשנות את הבר ככה שהוא יהיה במקום אחר, יציג את אחוז ההתקדמות ועד׳.
מאמר מעולה, קצר וקולע!
היי עטרה,
תודה רבה, שמח לשמוע!