בניית תפריט עוגנים – קישורים פנימיים לעמוד ארוך

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

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

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

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

תהליך פיתוח של תפריט כזה כולל 3 חלקים:

• מתן ID ייעודיים לקומות
• בניית התפריט
• JS לגלילה נעימה לעין בעמוד

נתחיל כרגיל צעד צעד.

בניית הקומות בצורה נכונה

כל קומה בעמוד תקבל ID ייעודי עבורה. כדאי שהID הזה יהיה משהו שקשור לקומה. נזכיר את הידוע – הID לא יכול להכיל רווחים, אלא אותיות אנגלית, ספרות והתווים מינוס (-) וקו תחתי (_) בלבד. בנוסף הID לא יכול להתחיל בספרה.

לדוגמה

<div id="about_floor">.....</div>
<div id="products_floor">.....</div>

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

כעת יש לנו קומות, בואו ונבנה את התפריט.

בניית תפריט הקישורים

ניצור ul ובתוכו li במספר הקישורים הנדרשים. בתוך כל li יהיה לנו a. הhref של כל a יהיה לID של הקומה שאליה הוא צריך להפנות. לדוגמה:

<ul id="menu_links">
    <li><a href="#about_floor">אודות</a></li>
    <li><a href="#products_floor">המוצרים בסדרה</a></li>
</ul>

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

במצב הזה, לחיצה על קישור תוריד אותנו לקומה הדרושה, אבל זה יקרה בקפיצה, ולא בגלילה נעימה. בשביל זה מוסיף את קוד הJS שלנו.

הוספת JS לגלילה חלקה בין הקומות

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

jQuery('#menu_links a').on('click', function(e){
    e.preventDefault(); // ביטול הקפיצה האוטומטית של העמוד לגובה הקומה
    var selector = jQuery(this).attr('href'); // לכידת מזהה הקומה שאליה צריך לקפוץ
    if(jQuery(selector).length > 0){ // בדיקה אם קומה עם המזהה הזה אכן קיימת בעמוד, כדי למנוע שגיאת JS
        var top = jQuery(selector).offset().top; // מציאת הנקודה העליונה של הקומה שאליה צריך להגיע
        jQuery('html, body').animate({
            scrollTop: top // הגדרת גלילה אנכית לנקודה הדרושה
        });
    }
});

במידה והheader בעמוד נעוץ למסך (fixed), כך שהוא תופס מקום – הרי שאם נגלול את העמוד לנקודה העליונה של הקומה – היא תהיה מוסתרת מתחת לheader, ולכן בשורה בקוד, שבה אנחנו מקבלים את הנקודה שאליה צריך לגלול – נוריד פיקסלים מהtop. לדוגמה אם הheader שלנו הוא בגובה של 50 פיקסלים:

var top = jQuery(selector).offset().top - 50;

כך כאשר נלחץ וננווט לקומה – החלק העליון שלה ייצמד לתחתית הheader.

במידה והסקריפט לא עובד באופן תקין – לחיצה על קישור פעם מביאה למקום הנכון ופעם לא – נגרמת ככל הנראה כי יש לbody או לhtml הגדרת הסתרת גלישה (overflow: hidden). ההגדרה הזו, כשהיא ניתנת לbody או לhtml, דופקת את חישוב הגבהים בjs.