אם אנחנו מעוניינים להעביר את המשתמש למקום מסוים באותו דף בלחיצה על קישור ניתן לעשות את זה באמצעות קישור לעוגן או באמצעות 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) אנו נשאיר שם את הקישור.