גלילה לאלמנט בדף באמצעות jQuery

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

 

דוגמאות וקישורים:

גלילה למדריך איך לעשות זאת ללא jQuery

גלילה למדריך איך לעשות זאת עם אפקט ב-jQuery

 

גלילה באמצעות עוגן (ללא jQuery וללא אפקטים)

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

בדוגמא שלנו אנחנו ניצור div עם ה-id בשם goHere כך:

<div id="goHere" >Text Text Text</div>

 

כעת ניצור קישור (a) כאשר ה-href שלו לא יהיה קישור לדף אחר אלא יהיה בו את ה-ID שהגדרנו עם התו # לפני כך:

<a href="#goHere">Go to here</a>

 

גלילה באמצעות jQuery

עכשיו, אם נרצה ליצור אפקט מעניין יותר של גלילה נוכל להשתמש ב jQuery.

נשתמש באותו div כמו מקודם:

<div id="goHere" >Text Text Text</div>

נוסיף פונקציה ב-jQuery לדף אשר מקבל את ה-ID של האלמנט שאנו רוצים לגלול אליו (קראתי לו elementId):

function SlideToTarget(elementId){
   $('html,body').animate({scrollTop: $('#' + elementId).offset().top},'slow');
}

בפונקציה SlideToTarget כאשר עושים animate הגלילה נעשית בצורה איטית בגלל הפרמטר slow. לפונקציה animate נותנת לנו את האפשרות לשנות אותו ל- fast, לתת לו מספר שיגדיר את מהירות הגלילה במילי שניות או להוריד אותו לגמרי ולקבל את הערך ברירת המחדל שהוא 400. ניתן לקרוא עוד על הפונקציה animate בדוקומנטציה של jQuery.

 

כעת נוסיף קריאה לפונקציה בלחיצה על הקישור:

<a onclick="SlideToTarget('goHere'); return false;" href="#goHere" >Go to here</a>

 

שימו לב שהוספתי onclick שקורא לפונקציה שהוספתי ולאחריו return false. מה שה-return false בעצם עושה זה לבטל את ההפניה של הקישור לאחר הפעלת הפונקציה כך שלא באמת נעשה שימוש בערך שנמצא ב href ובעצם אנו מונעים מהקישור לעשות את ההפניה שהוא ירצה לעשות, כך שבעיקרון יכולתי לרשום שם כל קישור שארצה אך הוא לא יתבצע, אך למען הסדר הטוב (ולמען דפדפנים שלא תומכים או בוטלה בהם האפשרות לשימוש ב- JavaScript) אנו נשאיר שם את הקישור.

 

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

תגיות:

הוסף תגובה