כיצד ליצור לחצן 'גלילה למעלה' באמצעות JavaScript ו- jQuery

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

כיצד להשיג שירות אינטרנט זמני

במאמר זה תלמד כיצד ליצור לחצן גלילה למעלה באמצעות JavaScript ו- jQuery.

כיצד ליצור כפתור גלילה למעלה באמצעות JavaScript

תוכל להוסיף לחצן גלילה למעלה למעלה לאתר שלך באמצעות קטע הקוד הבא:

קוד HTML

  
  
  
  
 Scroll-to-Top button using JavaScript  
  
  
  
  
  
  
  
  
 Scroll down the page
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.  
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.  
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.  
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.  
 
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.  
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.  
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.  
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.  
 
 
 
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.  
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.  
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.  
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.  
 
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.  
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.  
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.  
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.  
 
 

 
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.  
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.  
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.  
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.

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

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

קוד jQuery

קָשׁוּר: למד כיצד ליצור אלמנט ב- jQuery

// ===== Scroll to Top ====  
var btn = $('#button');  
// If the page is scrolled more than 300px,  
// show the scroll-to-top button  
// Otherwise hide the button  
$(window).scroll(function() {  
 if ($(window).scrollTop() > 300) {  
 btn.addClass('show');  
 } else {  
 btn.removeClass('show');  
 }  
});  
btn.on('click', function(e) {  
 e.preventDefault();  
 $('html, body').animate({scrollTop:0}, '300');  
});

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

קוד CSS

קָשׁוּר: דוגמאות פשוטות לקוד CSS שתוכל ללמוד תוך 10 דקות

#button {  
 display: inline-block;  
 background-color: #FF9800;  
 width: 50px;  
 height: 50px;  
 text-align: center;  
 border-radius: 4px;  
 position: fixed;  
 bottom: 30px;  
 right: 30px;  
 transition: background-color .3s,  
 opacity .5s, visibility .5s;  
 opacity: 0;  
 visibility: hidden;  
 z-index: 1000;  
}  
#button::after {  
 content: 'f077';  
 font-family: FontAwesome;  
 font-weight: normal;  
 font-style: normal;  
 font-size: 2em;  
 line-height: 50px;  
 color: #fff;  
}  
#button:hover {  
 cursor: pointer;  
 background-color: #333;  
}  
#button:active {  
 background-color: #555;  
}  
#button.show {  
 opacity: 1;  
 visibility: visible;  
}  
/* Styles for the content section */  
.content {  
 width: 77%;  
 margin: 50px auto;  
 font-family: 'Merriweather', serif;  
 font-size: 17px;  
 color: #6c767a;  
 line-height: 1.9;  
}  
@media (min-width: 500px) {  
 .content {  
 width: 43%;  
 }  
#button {  
 margin: 30px;  
 }  
}  
.content h1 {  
 margin-bottom: -10px;  
 color: #03a9f4;  
 line-height: 1.5;  
}  
.content h3 {  
 font-style: italic;  
 color: #96a2a7;  
}

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

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

הערה : הקוד המשמש במאמר זה הוא MIT מורשה .

למידע נוסף על חווית משתמש

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

אין לך אישור גישה

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל רוצה להיות מעצב UX? הנה איך להתחיל

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

קרא הבא נושאים קשורים

תִכנוּת
JavaScript
jQuery

על הסופר יובראג 'צ'נדרה(פורסמו 60 מאמרים)

יובראג 'הוא סטודנט לתואר ראשון במדעי המחשב באוניברסיטת דלהי, הודו. הוא נלהב מ- Full Stack Web Development. כשהוא לא כותב, הוא בוחן את עומק הטכנולוגיות השונות.

עוד מאת Yuvraj Chandra

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחצו כאן להרשמה