הוספת כפתור Scroll to Top באתרי וורדפרס

כפתורי back to top או scroll to top הפכו לתבנית UX מקובלת, במיוחד באתרים עתירי תוכן שנצפים במובייל. ברגע שגולש גולל מעבר לנקודה מסוימת, הכפתור מופיע ומאפשר קפיצה חזרה לראש העמוד בלחיצה אחת.

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

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

הוספת כפתור Scroll to Top

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

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

הוסיפו את הקוד הבא לקובץ functions.php של התבנית:

<?php
/******* BEGIN HERE *******/
function add_up_button() { ?>
    <div id="up_btn"><a href="#" title="Go Up!">Up!</a></div>
	<?php
}
add_action( 'wp_footer', 'add_up_button' );

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

#up_btn {
    position: fixed;
    bottom: 15px;
    right: 10px;
    display: none;
    z-index: 20;
}
#up_btn a {
    display: flex;
    background: #ffd200;
    border-radius: 50%;
    transition: all 200ms linear;
    color: #2d2d2d;
    direction: ltr;
    font-weight: 600;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
}

#up_btn a:hover {
    background: #2d2d2d;
    color: #ffd200;
}

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

הוסיפו את הקוד לקובץ ה-JS של התבנית שלכם. אם אתם צריכים עזרה בטעינת קבצי JS בוורדפרס, ראו את המדריך שלי על הוספת סקריפטים וסגנונות.

גרסת jQuery

function scroll_to_top_btn() {
    var up_btn = $('#up_btn');

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

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

scroll_to_top_btn();

גרסת Vanilla JavaScript (ללא jQuery)

אם התבנית שלכם לא מסתמכת על jQuery, אפשר לוותר על התלות. הגרסה הזו משתמשת ב-window.scrollTo() עם behavior: 'smooth' במקום ה-animate() של jQuery:

document.addEventListener('DOMContentLoaded', function () {
    var btn = document.getElementById('up_btn');
    if (!btn) return;

    window.addEventListener('scroll', function () {
        btn.style.display = window.scrollY > 1700 ? 'block' : 'none';
    });

    btn.addEventListener('click', function (e) {
        e.preventDefault();
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
});

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

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

הוספת אירוע GA4 לכפתור ה-Scroll to Top

אם אתם משתמשים ב-Google Analytics 4 עם סניפט gtag.js, תוכלו לעקוב אחרי לחיצות על הכפתור באמצעות אירוע מותאם אישית. גרסת jQuery:

$("#up_btn").on('click', function() {
    gtag('event', 'up_button_click', {
        'event_category': 'UX',
        'event_label': 'Scroll to Top'
    });
});

וגרסת Vanilla JS:

document.getElementById('up_btn').addEventListener('click', function() {
    gtag('event', 'up_button_click', {
        'event_category': 'UX',
        'event_label': 'Scroll to Top'
    });
});

לאחר העלאה, פתחו את דוח ה-Realtime ב-GA4 כדי לוודא שהאירועים מגיעים. האירוע המותאם יופיע גם תחת Reports > Engagement > Events לאחר שייצברו נתונים.

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

טיפים לנגישות

כמה שיפורים מהירים שיהפכו את הכפתור לנגיש יותר:

הוסיפו aria-label – אם הטקסט בכפתור קצר או מבוסס אייקון, קוראי מסך צריכים הקשר. עדכנו את ה-Markup כך שיכלול:

<div id="up_btn">
    <a href="#" aria-label="Scroll back to top" title="Go Up!">Up!</a>
</div>

כבדו את "הגדרת תנועה מופחתת" – חלק מהמשתמשים מפעילים prefers-reduced-motion במערכת ההפעלה שלהם. אם אתם משתמשים בגרסת Vanilla JS, בדקו את ההעדפה הזו ודלגו על האנימציה:

var motionOK = !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
window.scrollTo({ top: 0, behavior: motionOK ? 'smooth' : 'auto' });

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