גלילה לראש הדף עם אפקט בJavaScript

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

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

גלילה לראש הדף – הדרך הקלה (מאוד)

אחת הדרכים הקלות ביותר להגיע לראש הדף ללא אפקט כלשהו הוא להוסיף את הקוד הבא

<a href="javascript:scroll(0,0)">לראש הדף</a>

 

הסבר קצר

	<a href="">לראש הדף</a> //	קודם מוסיפים משהו לחיץ במקרה זה קישור
	javascript:scroll(0,0) // גאווה סקריפט פשוט אומרת לך למיקום 0

גלילה לראש הדף – ללא ג'אווה סקריפט

קיימת דרך נוספת להשתמש בקישור כדי להגיע ממקום למקום בתוך דף HTML

קישור שנשים בקוד האתר שלנו בראש הדף

<a name="top" href="#top">לראש הדף</a>

 

הסבר קצר * אתם צריכים div עם ID מתאים בראש המסמך שלכם.

	<a name="top" href="#top">לראש הדף</a> // גולל לDIV עם הID הזה

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

גלילה לראש הדף עם אפקט בג'אווה סקריפט

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

שלב א – מורידים את הג'אווה סקריפט * וודאו שהאתר שלכם לא מתשמש כבר בjQuery – לא בריא לקרוא לjQuery פעמיים!

ראשית עליכם ל… ליצור תיקייה בשם js בתוכה תשמרו את הקבצים

הסקריפטים להורדה:

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

 

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

<script type="text/javascript" src="js/jquery-2.0.1.min.js"></script>
<script type="text/javascript" src="js/scrolltopcontrol.js"></script>

זכרו כי יש למקם תגים אלו לפני תג ה<head/>

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

לקישור זה צריך להיות את הכתובת #top בצורה כזאת:

<a href="#top">לראש הדף</a>

חשוב לדעת ש…

אתם יכולים או.. לשים תמונה כזאת בתיקייה של האתר שלכםאו להסיר את הפקודה מהסקריפט עצמו בצורה כזאת:

לפני השינוי

	controlHTML: '<img style="width: 48px; height: 48px;" src="up.png" alt="" />'

אחרי השינוי

	controlHTML: '<img style="width: 0px; height: 0px;" alt="" />'

זקוקים לעזרה ביישום?

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