fbpx

כפתור גלילה למעלה

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

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

עוגן בכותרת עליונה (הדר)

דבר ראשון, יש ליצור יעד לפעולת הגלילה ולכן יש להפוך את הכותרת העליונה (הדר) לעוגן.

איך זה בקוד HTML:

נייצר אלמנט HTML עם ID ייחודי. נניח שה-ID יהיה Anchor-Top. אפשר יהיה לשלב ב-HTML את התגיות הבאות לשם כך (אחת מהשתיים):

				
					<a id="Anchor-Top"></a>
<div id="Anchor-Top"></div>

				
			

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

ובאלמנטור:

אפשר לעשות זאת באחת או בשתי הדרכים הבאות (אפשר שתיהן, אך לא כדאי להכניס שני IDs שונים):

  1. להוסיף אלמנט עוגן בתור אלמנט ראשון, עליון ביותר, (בלתי נראה) בעמוד.
    1. לשם כך הוסיפו אלמנט קישור עוגן להדר, מעל כל אלמנט אחר.
    2. בחלק תוכן, תחת עוגן, בתיבה השם הייחודי (ID) של עוגן תפריט, יש לציין את העוגן. ראו תמונות להלן.
    3. אלמנט זה מוסיף לקוד תגית div כמוצג לעיל.
  1. להוסיף ID לאזור של ההדר, תחת מתקדם->פריסה->CSS ID. בשיטה זו אנו בעצם נכוון ל-ID של האזור ולא ניצור אלמנט מיוחד. השיטה הזו מייצרת קוד נקי יותר והיא מספיקה לרוב, אלא אם כן ה-ID של האזור משמש גם לדברים אחרים שסותרים את הפעולה (למשל הגדרות CSS או JS), ואז נדרש עוגן ייחודי כמוסבר בסעיף הקודם.

יצירת כפתור

אפשר ליצור את הכפתור בהדר או בפוטר. המיקום לא משנה, כי נקבע לכפתור מיקום מקובע, כך שמקומו בעמוד יהיה קבוע. ב-CSS היינו כותבים את הפקודה:

				
					position: fixed;
				
			

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

  1. נוסיף אלמנט אייקון בהדר או בפוטר ונבחר את האייקון הרצוי בכרטיסיה תוכן – לרוב אחד מהאייקונים של חץ למעלה.
  2. בכרטיסיה תוכן, נקבע את הקישור של האייקון ל-ID שהגדרנו בשלב הקודם. יש להקליד סולמית # לפני ה-ID. ראו דוגמה בתמונה.
  1. נקבע את הצבע, הגודל והסיבוב של האייקון ורצוי גם להגדיר את הצבע, והאנימציה של המעבר (hover). הערה: הגדרת הסיבוב חלה על ההגדרה הרגילה והגדרת המעבר כאחת.
  1. תחת מתקדם->פריסה, נבחר תחת מיקום את הערך מקובע ונקבע את המיקום מבחינת גובה ורוחב במחוונים אוריינטציה אופקית ואוריינטציה אנכית.
  2. נקבע Z-index גבוה, למשל 9999, כדי שהכפתור יופיע מעל תוכן העמוד/הפוסט.
  3. נקבע לאייקון CSS ID. בדוגמה שלנו זה יהיה Scroll-Top.
  1. כדאי לבדוק את הכפתור גם בתצוגות רספוניסיביות אחרות ולשנות את הגודל והמיקום כנדרש. ייתכן מאוד שבמובייל אפשר להגדיר כפתור קטן יותר.

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

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

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

לשם כך אפשר להשתמש בסקריפט הבא של JaveScript, אותו יש להכניס באדמין תחת אלמנטור->ניהול קודים, או בחלון Custom JS של הגדרת התבנית של ההדר/הפוטר (תחת מתקדם), אם יש לכם תוסף מתאים שמוסיף חלון זה (למשל Essential Addons).

				
					function scroll_to_top_button() {
    var up_button = jQuery('#Scroll-Top');

jQuery(window).scroll(function(){
        if (jQuery(this).scrollTop() > 1700) {
            up_button.fadeIn(300);
        } else { 
            up_button.fadeOut(300);
        }
    });


    up_button.click(function(){
        jQuery('html, body').animate({scrollTop : 0},800);
        return false;
    });

}

scroll_to_top_button();
				
			

בסקריפט זה אפשר לשנות:

  1. את שם ה-CSS ID בשורה 2 (Scroll-Top בדוגמה שלנו).
  2. את המרחק המינימלי מהקצה העליון של העמוד בו יראה הכפתור, בשורה 5 (1700 בדוגמה שלנו)
  3. את מהירות ה-FadeIn וה-FadeOut בשורות 6 ו-8 בהתאמה (300 בדוגמה שלנו).
  4. את מהירות הגלילה למעלה בשורה 14 (800 בדוגמה שלנו).

 

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

באמצעות תוסף

למשל עם חבילת התוספים הפופלרית Essential Addons (EA) שקרוב לוודאי שכבר מותקנת אצלכם.

החבילה כוללת בנוסף לאלמנטים גם הרחבות (extensions) ואחת מהן היא Scroll to Top שמאפשרת להגדיר כפתור גלילה למעלה בהגדרות הכלליות של תבנית מסוג עמוד יחיד או פוסט יחיד.

  1. הפעלת ההרחבה בהגדרות התוסף באדמין.
    1. יש לגשת לכרטיסיית extensions תחת Essential Addons באדמין.
    2. אם ההרחבה לא מופעלת, יש להעביר את המחוון למצב פעיל. לא לשכוח ללחוץ על הכפתור Save Changes.
  1. בטמפלט מסוג עמוד יחיד או מסוג פוסט יחיד, בהגדרות העמוד (לכניסה, לחצן גלגל שיניים למטה מימין), תחת הגדרות, נמצא את החלק Scroll to Top.
  2. בחלק Scroll to Top:
    1. נפעיל את כפתור הגלילה למעלה, בהעברת המחוון Enable Scroll to Top למצב YES (כחול).
    2. בד"כ, כדאי גם להפוך הגדרה זו להגדרה גלובלית, כלומר שהיא תופיע בכל האתר, בהעברת המחוון Enable Scroll to Top Globally למצב YES (כחול).
    3. אם בחרתם להפעיל הגדרת גלובליות, בחרו בתיבה הנפתחת Display On כדי לציין אם להציג את הכפתור בעמודים בלבד, בפוסטים בלבד, או בשניהם. כאמור לפעמים יש עיצוב שונה לעמודים ולפוסטים ולכן רוצים להגדיר כפתור מעט שונה, למשל בצבעים שונים. אפשר להגדיר הגדרות ספציפיות לתבנית שידרסו את ההגדרות הגלובליות. לפעמים זה לא עובד כשורה עם התוסף הזה וצריך לבדוק שהכול הוגדר כמבוקש בכל עמוד ו/או פוסט.
    1. כעת נגדיר הגדרות שונות הקשורות לכפתור עצמו כגון, המיקום שלו (בד"כ Bottom Right), מרחק מהמיקום שנבחר (כי לא רוצים שממש יהיה דבוק לפינה, אלא קצת בפנים). האייקון שיופיע על הכפתור, הרוחב והגובה של הכפתור, גודל האייקון או גודל ה-SVG (אם הרקע שקוף כמו אצלנו, יהיה שווה לגודל הכפתור, אחרת יהיה יותר קטן כדי להשאיר שוליים לרקע), ערך ה-z-index שלו (כדי שיופיע מעל התוכן של העמוד/פוסט), השקיפות של הכפתור, הצבע של האייקון, הצבע של הרקע (אפשר להשאיר שקוף) והרדיוס של הרקע (ליצירת פינות עגולות. לא בשימוש אם הרקע שקוף).
  1. בסוף ההגדרה, יש לפרסם או לעדכן את הטמפלט.


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

  1. בתבנית מסוג עמוד יחיד או מסוג פוסט יחיד, בהגדרות העמוד (לכניסה, לחצן גלגל שיניים למטה מימין), תחת הגדרות, נמצא את החלק Scroll to Top.
  2. בחלק Scroll to Top:
    1. נפעיל את כפתור הגלילה למעלה, בהעברת המחוון Enable Scroll to Top למצב YES (כחול).
    2. בד"כ, כדאי גם להפוך הגדרה זו להגדרה גלובלית, כלומר שהיא תופיע בכל האתר, בהעברת המחוון Enable Scroll to Top Globally למצב YES (כחול).
    3. אם בחרתם להפעיל הגדרת גלובליות, בחרו בתיבה הנפתחת Display On כדי לציין אם להציג את הכפתור בעמודים בלבד, בפוסטים בלבד, או בשניהם. כאמור לפעמים יש עיצוב שונה לעמודים ולפוסטים ולכן רוצים להגדיר כפתור מעט שונה, למשל בצבעים שונים. אפשר להגדיר הגדרות ספציפיות לתבנית שידרסו את ההגדרות הגלובליות. לפעמים זה לא עובד כשורה עם התוסף הזה וצריך לבדוק שהכול הוגדר כמבוקש בכל עמוד ו/או פוסט.
    4. כעת נגדיר הגדרות שונות הקשורות לכפתור עצמו כגון, המיקום שלו (בד"כ Bottom Right), מרחק מהמיקום שנבחר (כי לא רוצים שממש יהיה דבוק לפינה, אלא קצת בפנים). האייקון שיופיע על הכפתור, הרוחב והגובה של הכפתור, גודל האייקון או גודל ה-SVG (אם הרקע שקוף כמו אצלנו, יהיה שווה לגודל הכפתור, אחרת יהיה יותר קטן כדי להשאיר שוליים לרקע), ערך ה-z-index שלו (כדי שיופיע מעל התוכן של העמוד/פוסט), השקיפות של הכפתור, הצבע של האייקון, הצבע של הרקע (אפשר להשאיר שקוף) והרדיוס של הרקע (ליצירת פינות עגולות. לא בשימוש אם הרקע שקוף).
  3. בסוף ההגדרה, יש לשמור את התבנית.

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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *