Smooth Scroll לשיפור חווית המשתמש

אפקט Smooth Scroll הינו אפקט מאוד נפוץ לאחרונה בקרב אתרי One-Page.
אפקט זה מאפשר לגולשים באתר לגלול לנקודות שונות בדף בצורה נעימה וחלקה.

מרבית האתרים אשר נבנים לאחרונה הינם אתרים One-Page, כלומר אתרים אשר לרוב יכילו עמוד אחד.
האתרים הללו מעוצבים כך שהם יכללו את כל התוכן של האתר או תקצירים של הדפים העיקריים באתר בעמוד אחד וראשי.
באתרים כאלו לרוב התפריט יקשר לאיזורים שונים באתר ע״י שימוש בקישורי עוגן (Anchor Links).

Smooth Scroll כמשפר חווית משתמש

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

השימוש ב-Smooth Scroll משפר בהחלט את חווית המשתמש של הגולש ולכן יכול לגרום לו להישאר באתר יותר ולשפר את ה-Bounce Rate.

בניית אפקט Smooth Scroll

בחלק זה במאמר נלמד כיצד לבנות את אפקט ה-Smooth Scroll ע״י שימוש ב-JavaScript בלבד.
המאמר הבא הינו מאמר קליל, אך כן נדרש ידע בסיסי ב-HTML, CSS ו-JavaScript.

שלב ראשון – הוספת jQuery

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

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

העתיקו את הקוד הבא והוסיפו אותו ממש לפני התגית </body>.
הקוד הבא מוסיף את jQuery ואת jQuery Migrate מה-CDN של jQuery, מה שיפאשר לנו לטעון את הסקריפט אצל המשתמש בצורה מהירה יותר.

שלב שני – בניית תפריט

כעת לאחר שהכנסנו jQuery לאתר שלנו, נבנה את התפריט שלנו אשר עזרתו ננווט בין החלקים השונים שהבאתר.

<nav role="navigation">
  <ul>
    <li><a href="#welcome" class="smooth-scroll">דף הבית</a></li>
    <li><a href="#about" class="smooth-scroll">אודות</a></li>
    <li><a href="#portfolio" class="smooth-scroll">תיק עבודות</a></li>
    <li><a href="#contact" class="smooth-scroll">צור קשר</a></li>
  </ul>
</nav>

הקוד הנ"ל מתפקד בתור תפריט אשר לחיצה על אחד מהם יקפוץ לקישור ייחסי, כלומר הוא יקפוץ לקטע באתר אשר עטוף באלמנט עם ה-id הרלוונטי.

שלב שלישי – בניית העמודים

<section id="welcome" class="page welcome">
  <!-- Main Page -->
</section>
<section id="about" class="page about">
  <!-- About Page -->
</section>
<section id="portfolio" class="page portfolio">
  <!-- Portfolio Page -->
</section>
<section id="contact" class="page contact">
  <!-- Contact Page -->
</section>

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

שלב רביעי – בניית קוד Smooth Scroll

השלב האחרון שנותר לנו הוא בעצם העיקרי, לבנות את קוד ה-Smooth Scroll.
הקוד יאפשר את האפקשר אשר יגלול בצורה נעימה וחלקה את הדף לכיוון האלמנט הרצוי.
את הקוד הבא הדביקו בין תגיות <script> ... </script> ממש לפני </body>.

$( document ).ready( function () {
  
  $( '.smooth-scroll' ).click( function ( e ) {
    e.preventDefault();
    
    var linkID = $( this );
    var pageID = $( this.hash );
    
    if( pageID.length ) {
      $( 'html, body' ).animate( {
        scrollTop: pageID.offset().top
      }, {
        duration: 'slow',
        complete: function () {
          $( '.smooth-scroll' ).removeClass( 'active' );
          linkID.addClass( 'active' );
        }
      } );
    }
  } );
  
} );

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

• שורה 1 // אנחנו בעצם אומרים לסקריפט לחכות שהאתר יטען במלואו על מנת שהוא יוכל לעבוד.
• שורה 3 // אנחנו מגדירים שכל אלמנט שיש לו את המחלקה (class) השווה ל-smooth-scroll, שכאשר ילחצו עליו הוא יריץ את הסקריפט של Smooth Scroll.
• שורה 4 // קוראים לפונקציה אשר תמנע מהאלמנט לעשות את מה שהוא אמור לעשות בברירת המחדל, אם זה קישור אז לעבור לדף אחר או לקפוץ לקטע הרצוי.
• שורות 6 – 7 // מגדירים שני משתנים, האחד ישמור את המזהה של הקישור, והשני ישמור את המזהה (id) של החלק אליו אנחנו רוצים לקפוץ.
• שורה 9 // במידה והערך לא ריק הסקריפט ימשיך לרוץ, אם הערך ריק אז לא יתבצע דבר.
• שורות 10 – 18 // הסקריפט יחשב את ההבדל בין האלמנט הרצוי לבין המיקום הנוכחי של המשתמש ויגלול אליו בצורה נוחה.
  בסוף הגלילה, אנחנו נסמן את הקישור הרלוונטי ע"י הוספת המחלקה active.

סיכום

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