כפתור גלילה מעלה- HTML

שלום לכווולם,
אחרי שלמדנו את הבסיס החשוב שלJavaScript, היום אני הולך להראות לכם איך להשתמש בג'אווה בפועל.

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

הכפתור יהיה בנוי משלושה חלקים-
1. כפתור
2. תמונה
3. עיצוב בcss
4. פעולה בג'אווה סקריפט

1. קוד הכפתור שלנו יראה כך-

<button onclick="Scroll_To_Top" id="Scroll_To_Top_btn"></button>

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

2. קוד התמונה שתהיה בתוך הכפתור יראה כך-

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht_pZeWYEk0savE9AHIBex421DX3pDUI1NLSPIfWTKOCYAbf03Wl3FYYtzhlNVmyFQlFocy09K0q_NBWQJLq93ieRuymKOvIPsG6OfF912d_LdTbD1HpcnMAqb0LYflCzzK7RbuQgVpPbS/s89/%25D7%2597%25D7%25A52.png" width="20px">

3. קוד הCSS שמעצב את הכפתור יראה כך-

<style> #Scroll_To_Top_btn { font-size: 18px; border: none; outline: none; background-color: lightgrey; color: white; padding: 6px; border-radius: 4px; z-index: 99; position: fixed; bottom: 20px; right: 20px; cursor: pointer; display: none; } #Scroll_To_Top_btn:hover { background-color: #555; } </style>

הסוף של הקוד טיפה יותר מסובך, אבל אני אסביר-
z-index קובע את מיקום הכפתור, האם הוא יהיה מעל הטקסט או מעל כל אלמנט.
position קובע האם הכפתור צף, או במקום על הדף- fixed אומר שהוא צף לכן צריך את
bottom ואת right שקובעים את המרחק של הכפתור מלמטה ומימינה.
cursor מגדיר את תצוגת הסמן- מצביע ברירת מחדל וכו'.
display מגדיר האם האלמנט מוצג או מוסתר

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

<script> // קבל את הכפתור var mybutton = document.getElementById("Scroll_To_Top_btn"); // כאשר המשתמש גולל את הדף מתחת ל20 פיקסלים הכפתור מוצג window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // מתי שהמשתמש לוחץ על הכפתור העמוד נגלל מעלה function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } </script>

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

→ לפוסט הקודם בנושא HTML לפוסט הבא בנושא HTML ←