jQuery scorrere verso l'elemento

Ho questo elemento input:

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

Poi ho altri elementi, come altri input di testo, textareas, ecc.

Quando l'utente clicca su quel input con #subject, la pagina dovrebbe scorrere fino all'ultimo elemento della pagina con una bella animazione. Dovrebbe essere uno scroll in basso e non in alto.

L'ultimo elemento della pagina è un pulsante submit con #submit:

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

L'animazione non dovrebbe essere troppo veloce e dovrebbe essere fluida.

Sto usando l'ultima versione di jQuery. Preferisco non installare alcun plugin ma usare le caratteristiche predefinite di jQuery per ottenere questo risultato.

Maistrenko Vitalii
Domanda modificata 26º settembre 2017 в 12:18
Programmazione
javascript jquery
13º luglio 2011 в 9:49
9 visualizzazioni
Soluzione

Supponendo che tu abbia un pulsante con l'id button, prova questo esempio:

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

Ho preso il codice dall'articolo Scorrere agevolmente verso un elemento senza un plugin jQuery. E l'ho testato sull'esempio qui sotto.


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    Click me
php_nub_qq
Risposta modificata 8º luglio 2018 в 2:48
Commentari (24)

jQuery .scrollTo(): Visualizza - Demo, API, Fonte

Ho scritto questo plugin leggero per rendere lo scorrimento di pagine/elementi molto più facile. È flessibile dove si potrebbe passare un elemento di destinazione o un valore specificato. Forse questo potrebbe essere parte della prossima release ufficiale di jQuery, cosa ne pensi?

Esempi di utilizzo:

$('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

Opzioni:

scrollTarget: Un elemento, una stringa o un numero che indica la posizione di scorrimento desiderata.

offsetTop: Un numero che definisce la spaziatura aggiuntiva sopra il target di scorrimento.

duration: Una stringa o un numero che determina la durata dell'animazione.

easing: Una stringa che indica quale funzione di easing utilizzare per la transizione.

completo: Una funzione da chiamare quando l'animazione è completa.

Alex78191
Risposta modificata 17º maggio 2017 в 10:37
Commentari (11)

Usando questo semplice script

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

Farebbe in modo che se viene trovato un hashtag nell'url, lo scrollTo si anima all'ID. Se non viene trovato un hashtag, allora ignora lo script.

Warface
Risposta modificata 24º novembre 2017 в 4:34
Commentari (0)