בתקופה האחרונה ישנם הרבה אתרים אשר מציגים מעין בר התקדמות בראש הדפדפן אשר מציג את התקדמות הגלילה של העמוד, לרוב זה משתמש כאמצעי להעלאת חווית המשתמש ע״י הצגת התקדמות הגלילה של הגולש.

לוגו של טלגרם הצטרפו לערוץ הטלגרם וקבלו עדכון כאשר מאמר חדש מתפרסם!

בניית פס התקדמות

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

קוד 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 );

התוצאה

סיכום

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

דור צוברי

מתכנת מגיל 13, ומתעסק עם וורדפרס מגיל 18, אוהב לפצח אתגרים ולפתח דברים מורכבים על בסיס וורדפרס. עצמאי מגיל 16, מרצה ובלוגר. בזמן הפנוי שלי אוהב מאוד לקרוא קומיקס של MARVEL.

דור צוברי

תגובות לפוסט

כתיבת תגובה

תגובה אחת

  1. עטרה

    מאמר מעולה, קצר וקולע!

    1. מחבר
      דור צוברי

      היי עטרה,
      תודה רבה, שמח לשמוע!