Anima lo scorrimento fino all'ID al caricamento della pagina

123

Sto cercando di animare lo scorrimento fino a un ID particolare al caricamento della pagina. Ho fatto molte ricerche e mi sono imbattuto in questo:

$("html, body").animate({ scrollTop: $('#title1').height() }, 1000);

ma questo sembra partire dall'ID e animato verso la parte superiore della pagina?

L'HTML (che si trova a metà pagina) è semplicemente:

<h2 id="title1">Title here</h2>

jquery scroll jquery-animate

— Adi
fonte

1

Questa non è una gran risposta, ma consiglio caldamente il plugin "scrollTo" di Ariel Flesler; ha molte funzionalità per la panoramica di una pagina e alcune estensioni al plugin per casi comuni (ad esempio, potresti trovare il suo plugin "LocalScroll" utile per scorrere fino all'href di un link se si trova sulla stessa pagina). Puoi ottenere il plugin qui: flesler.blogspot.com/2007/10/jqueryscrollto.html

— Faisal

327

Stai solo scorrendo l'altezza del tuo elemento. offset () restituisce le coordinate di un elemento relativo al documento e topparam ti darà la distanza dell'elemento in pixel lungo l'asse y:

$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);

E puoi anche aggiungere un ritardo ad esso:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);

— BumbleB2na
fonte

1

Che cos'è lo scorrimento automatico che mi fa dire "WOW COOL !!"? Forse è la semplicità della tua soluzione.

— theblang

Avevo bisogno di scorrere un elemento in visualizzazione al caricamento della pagina, ma ho avuto due problemi: a) l'utilizzo di "html, body" ha fornito due callback (uno per ogni elemento corrispondente). b) Dipende dal browser quale body o html funziona. Quindi ho creato una sintesi che puoi adattare per l'uso nel tuo progetto per assicurarti che lo scorrimento nella visualizzazione funzioni su "qualsiasi" browser e che riceverai solo una richiamata al termine dell'animazione. gist.github.com/netsi1964/4ddffe1ae14e05220d25

— Netsi1964

2

Questo non è proprio corretto. Dovresti davvero considerare la posizione di scorrimento corrente del corpo o dell'elemento che stiamo cercando scroll. Con questo in mente dovresti aggiungere la posizione di scorrimento corrente del bodyalla offset().topposizione dell'elemento che vogliamo in vista, La somma risultante è il valore a cui vogliamo scorrere. $('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);

— mattdevio

@magreenberg l'hai provato? Se la posizione di scorrimento corrente è superiore al valore 0, ciò che stai suggerendo potrebbe non funzionare. Supponiamo che il contenitore scorrevole sia alto 1000 pixel e la posizione di scorrimento corrente sia a 1000. Supponiamo che l'elemento su cui stai scorrendo si trovi al centro verticale a 500. Penso che quello che stai suggerendo gli direbbe di scorrere fino a 1500 , giusto?

— BumbleB2na

@ BumbleB2na .offset().topti darebbe un numero negativo in questo caso. E questo funziona davvero solo per bodye htmlpoiché offset().topti darà l'offset superiore del documento, non il genitore di scorrimento previsto.

— mattdevio

12

Soluzione javascript pura con funzione scrollIntoView () :

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});

<h2 id="title1">Some title</h2>

Espandi lo snippet

Il parametro "smooth" di PS ora funziona da Chrome 61 come julien_c menzionato nei commenti.

— Vladimir Vovk
fonte

1

Funziona ora (da Chrome 61)

— julien_c

Assicurati di controllare la compatibilità del browser. A partire dal 10/2018 IE (11), Edge e Safari supportano "scrollIntoView" ma non l'opzione "smooth".

— metal_jacke1

Pure JS ftw. Grazie per quello snippet! Liscio come una doppia crema burrosa

— jean d'arme

4

$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: $('#title1').offset().top }, 1000);

jquery-animate-body-per-tutti-i-browser .

— AleX grigio
fonte

3

C'è un plugin jquery per questo. Scorre il documento fino a un elemento specifico, in modo che si trovi perfettamente al centro della visualizzazione. Supporta anche gli andamenti dell'animazione in modo che l'effetto di scorrimento risulti estremamente fluido. Controlla questo collegamento .

Nel tuo caso il codice è

$("#title1").animatedScroll({easing: "easeOutExpo"});

— Eugene Tiurin
fonte

"Supporta anche gli andamenti delle animazioni in modo che l'effetto di scorrimento risulti estremamente fluido" Sfortunatamente, ciò non è vero. Se il computer è lento per qualche motivo, continua a saltare senza effettivamente muoversi correttamente.

— brunoais

Lo scorrimento uniforme richiede il calcolo di molti pixel. Sicuramente un "computer" lento (più GPU) non può farlo, ma a causa della mancanza di ALU sufficienti. Quindi in generale ha ragione. E lib di scorrimento davvero facile.

— Roland

1

prova con il codice seguente. crea elementi con il nome della classe di scorrimento della pagina e mantieni il nome dell'ID sui hrefcollegamenti corrispondenti

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

— Akhil
fonte

-3

per lo scorrimento semplice, usa il seguente stile

altezza: 200px; overflow: scroll;

e usa questa classe di stile per scorrere quale div o sezione vuoi mostrare

— mm
fonte