Domanda jQuery scorri fino all'elemento


ho questo input elemento:

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

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

Quando l'utente fa clic su di esso input con #subject, la pagina dovrebbe scorrere fino all'ultimo elemento della pagina con una bella animazione. Dovrebbe essere una scroll verso il basso e non verso l'alto.

L'ultimo elemento della pagina è a submit pulsante 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 eseguendo l'ultima versione di jQuery. Preferisco non installare alcun plug-in, ma utilizzare le funzionalità jQuery predefinite per raggiungere questo obiettivo.


1869
2017-07-13 09:49


origine


risposte:


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 ricevuto il codice dall'articolo Scorri facilmente verso un elemento senza un plugin jQuery. E l'ho provato nell'esempio qui sotto.

<html>
    <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>
    <button id="click">Click me</button>
</html>


3475
2017-07-13 09:52



  jQuery .scrollTo() Method 

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

Ho scritto questo plugin leggero per semplificare lo scorrimento di pagine / elementi. È flessibile in cui è possibile passare un elemento di destinazione o un valore specificato. Forse questo potrebbe essere parte della prossima versione 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 punto di scorrimento.

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

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

completare: Una funzione da chiamare una volta completata l'animazione.


453
2017-10-05 08:50



Se non ti interessa molto l'effetto smooth scroll e sei solo interessato a scorrere verso un particolare elemento, non hai bisogno di alcuna funzione jQuery per questo. Javascript ha coperto il tuo caso:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Quindi tutto ciò che devi fare è: $("selector").get(0).scrollIntoView(); 

.get(0) è usato perché vogliamo recuperare l'elemento DOM di JavaScript e non l'elemento DOM di JQuery.


266
2017-12-24 11:35



Guarda il scrollTo collegare. Puoi vedere la demo Qui.

Spero possa essere d'aiuto.


42
2017-07-13 11:05



jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>


26
2017-07-18 18:06



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 un tag hash viene trovato nell'URL, lo scrollTo si animi sull'ID. Se non è stato trovato il tag hash, ignorare lo script.


26
2017-09-05 11:53



La soluzione di Steve e Peter funziona molto bene.

Ma in alcuni casi, potrebbe essere necessario convertire il valore in un numero intero. Stranamente, il valore restituito da $("...").offset().top a volte è in float.
Uso: parseInt($("....").offset().top)

Per esempio:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

15
2018-02-06 15:39



Una versione compatta della soluzione "animata".

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

Utilizzo di base: $('#your_element').scrollTo();


15
2017-08-29 11:19



Se si gestisce solo lo scorrimento su un elemento di input, è possibile utilizzare focus(). Ad esempio, se si desidera scorrere fino al primo input visibile:

$(':input:visible').first().focus();

O il primo input visibile in un contenitore con classe .error:

$('.error :input:visible').first().focus();

Grazie a Tricia Ball per averlo fatto notare!


12
2018-01-28 17:00