Πώς να δημιουργήσετε ένα κουμπί 'Μετακίνηση προς τα πάνω' χρησιμοποιώντας JavaScript και jQuery

Χρησιμοποιείται ένα κουμπί «κύλισης προς τα πάνω» για να επιστρέψετε εύκολα την προβολή σας στο επάνω μέρος της σελίδας. Αυτή η μικρή δυνατότητα UX είναι πολύ κοινή στους σύγχρονους ιστότοπους. Είναι ιδιαίτερα χρήσιμο για ιστοσελίδες που έχουν πολύ περιεχόμενο, όπως εφαρμογές μιας σελίδας.

δωρεάν εφαρμογές μουσικής εκτός σύνδεσης για το android

Σε αυτό το άρθρο, θα μάθετε πώς μπορείτε να δημιουργήσετε ένα κουμπί κύλισης προς τα πάνω χρησιμοποιώντας 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 άρθρα)

Ο Yuvraj είναι προπτυχιακός φοιτητής Πληροφορικής στο Πανεπιστήμιο του Δελχί, Ινδία. Είναι παθιασμένος με το Full Stack Web Development. Όταν δεν γράφει, εξερευνά το βάθος διαφορετικών τεχνολογιών.

Περισσότερα από τον Yuvraj Chandra

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή