jQuery κύλιση στο στοιχείο

Έχω αυτό το στοιχείο input:

<input type="text" class="textfield" value="" id="subject" name="subject">

Στη συνέχεια, έχω κάποια άλλα στοιχεία, όπως άλλες εισόδους κειμένου, textareas, κλπ.

Όταν ο χρήστης κάνει κλικ σε αυτή την "είσοδο" με το "θέμα", η σελίδα θα πρέπει να μετακινηθεί στο τελευταίο στοιχείο της σελίδας με ένα ωραίο animation. Θα πρέπει να γίνεται κύλιση προς τα κάτω και όχι προς τα πάνω.

Το τελευταίο στοιχείο της σελίδας είναι ένα κουμπί submit με #submit:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

Η κίνηση δεν πρέπει να είναι πολύ γρήγορη και πρέπει να είναι ρευστή.

Χρησιμοποιώ την τελευταία έκδοση της jQuery. Προτιμώ να μην εγκαταστήσω κανένα πρόσθετο αλλά να χρησιμοποιήσω τα προεπιλεγμένα χαρακτηριστικά της jQuery για να το πετύχω αυτό.

Maistrenko Vitalii
Επεξεργασμένη ερώτηση Κάνε Σεπτέμβριος 2017 в 12:18
Προγραμματισμός
javascript jquery
Κάνε Ιούλιος 2011 в 9:49
7 προβολές
Λύση

Υποθέτοντας ότι έχετε ένα κουμπί με το id button, δοκιμάστε αυτό το παράδειγμα:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Πήρα τον κώδικα από το άρθρο [Ομαλή κύλιση σε ένα στοιχείο χωρίς πρόσθετο jQuery][1]. Και τον δοκίμασα στο παρακάτω παράδειγμα.

php_nub_qq
Επεξεργασμένη απάντηση Κάνε Ιούλιος 2018 в 2:48
Σχόλια (24)

jQuery .scrollTo(): View - Demo, API, Source

Έγραψα αυτό το ελαφρύ plugin για να κάνω την κύλιση σελίδων/στοιχείων πολύ πιο εύκολη. Είναι'ευέλικτο όπου θα μπορούσατε να περάσετε ένα στοιχείο-στόχο ή μια καθορισμένη τιμή. Ίσως αυτό θα μπορούσε να αποτελέσει μέρος της επόμενης επίσημης έκδοσης της jQuery's, τι πιστεύετε;

Παραδείγματα χρήσης:

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

Επιλογές:

scrollTarget: Ένα στοιχείο, συμβολοσειρά ή αριθμός που υποδεικνύει την επιθυμητή θέση κύλισης.

offsetTop: Ένας αριθμός που ορίζει πρόσθετη απόσταση πάνω από το στόχο κύλισης.

duration: Μια συμβολοσειρά ή ένας αριθμός που καθορίζει τη διάρκεια της κίνησης.

easing: Μια συμβολοσειρά που υποδεικνύει ποια συνάρτηση χαλάρωσης θα χρησιμοποιηθεί για τη μετάβαση.

complete: Μια συνάρτηση που θα κληθεί μόλις ολοκληρωθεί η κίνηση.

Alex78191
Επεξεργασμένη απάντηση Κάνε Μάιος 2017 в 10:37
Σχόλια (11)

Χρησιμοποιώντας αυτό το απλό σενάριο

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

Θα κάνει σε είδος ότι αν μια ετικέτα hash βρέθηκε στο url, το scrollTo κινείται στο ID. Εάν δεν βρεθεί ετικέτα κατακερματισμού, τότε αγνοεί το σενάριο.

Warface
Επεξεργασμένη απάντηση Κάνε Νοέμβριος 2017 в 4:34
Σχόλια (0)