jQuery .scrollTop (); + animazione


172

Ho impostato la pagina per scorrere verso l'alto quando si fa clic su un pulsante. Ma prima ho usato un'istruzione if per vedere se la parte superiore della pagina non era impostata su 0. Quindi, se non è 0, anima la pagina per scorrere verso l'alto.

var body = $("body");
var top = body.scrollTop() // Get position of the body

if(top!=0)
{
  body.animate({scrollTop:0}, '500');
}

La parte difficile ora è animare qualcosa DOPO che la pagina è stata spostata in alto. Quindi il mio prossimo pensiero è, scoprire qual è la posizione della pagina. Quindi ho usato il registro della console per scoprirlo.

console.log(top);  // the result was 365

Questo mi ha dato un risultato di 365, suppongo che sia il numero di posizione in cui mi trovavo poco prima di scorrere verso l'alto.

La mia domanda è come impostare la posizione su 0, in modo da poter aggiungere un'altra animazione che viene eseguita una volta che la pagina è a 0?

Grazie!


1
è necessario che quel pulsante sul quale si accende l'evento sia sempre visibile? In caso contrario, ho un codice che non richiede alcun tipo di condizione che può essere facile per la tua prima condizione
The Mechanic,

1
Non ci dovrebbero essere virgolette intorno ai millisecondi. Le "stringhe" a cui fa riferimento la documentazione sono slow / fast
mplungjan

Risposte:


314

Per fare ciò, è possibile impostare una funzione di callback per il comando animato che verrà eseguito al termine dell'animazione di scorrimento.

Per esempio:

var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() { 
   alert("Finished animating");
});

Dove si trova quel codice di avviso, è possibile eseguire più javascript per aggiungere ulteriori animazioni.

Inoltre, lo 'swing' è lì per impostare l'allentamento. Controlla http://api.jquery.com/animate/ per maggiori informazioni.


1
Grazie Thomas, è quello di cui avevo bisogno. Ho anche aggiunto un ritardo poiché la classe viene aggiunta così rapidamente. if (top! = 0) {console.log ("scroll nascosto"); body.animate ({scrollTop: 0}, '500', 'swing', function () {console.log ("Animazione finita"); leftitems.delay (1000) .removeClass ("slide");}); }
Juan Di Diego,

5
Non sono sicuro che sia perché questo post ha 4 anni, ma penso che nelle versioni più recenti di jQuery sia necessario rimuovere quelle virgolette singole nei tempi: body.animate ({scrollTop: 0}, 500, 'swing', function () {alert ("Animazione terminata");});
Andrew,

27
Il callback verrà eseguito due volte, a proposito, perché hai selezionato due elementi.
Big McLarge: enorme

8
Thomas aveva un buon punto per aggiungere body e html. Caso 1. Chrome lettura corpo e srolling, FIrefox ha bisogno di HTML per farlo.
fearis,

4
Appena provato - $ ('html') non funziona in Chrome e $ ('body') non funziona in Firefox, quindi è necessario $ ('html, body'). E anche chiamare .stop () è una buona cosa: ho provato a chiamare animate più volte rapidamente in Chrome e dopo non sono riuscito a scorrere la pagina.
Lev Lukomsky,

55

Prova questo codice:

$('.Classname').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});

8
$("html")dovrebbe essere usato invece, perché nel tuo caso se aggiungi una funzione di callback verrà chiamata due volte, una volta per html e una volta per body . E usare il corpo non fa nulla.
flawyte,

10
sembra che dipende dal browser. in alcuni, $ ('html') potrebbe non fare nulla, quindi è necessario utilizzare entrambi e occuparsi del callback attivato due volte.
commonpike,

31

Usa questo:

$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );

    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500);
    }

});

8

per questo è possibile utilizzare il metodo di callback

body.animate({
      scrollTop:0
    }, 500, 
    function(){} // callback method use this space how you like
);

7

Prova questo invece:

var body = $("body, html");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
       body.animate({scrollTop :0}, 500,function(){
         //DO SOMETHING AFTER SCROLL ANIMATION COMPLETED
          alert('Hello');
      });
}

5

Soluzione semplice:

scorrendo verso qualsiasi elemento per ID o NAME:

SmoothScrollTo("#elementId", 1000);

codice:

function SmoothScrollTo(id_or_Name, timelength){
    var timelength = timelength || 1000;
    $('html, body').animate({
        scrollTop: $(id_or_Name).offset().top-70
    }, timelength, function(){
        window.location.hash = id_or_Name;
    });
}

' timelength ' è già passato come parametro quindi non è necessario dichiararlo con 'var'. Una "modifica" di questa risposta non era possibile, in quanto conteneva meno di 6 caratteri! ;-) +1
Anthony Walsh,

@AnthonyWalsh assolutamente no. varè necessario non sovrascrivere quello globale (se esiste una variabile globale con quel nome)
T.Todua

Abbastanza giusto ;-) Sto usando TypeScript e passando un numero direttamente come parametro per la lunghezza temporale quindi tutto l'ambito locale nel mio caso. Saluti!
Anthony Walsh

4

Codice con funzione click ()

    var body = $('html, body');

    $('.toTop').click(function(e){
        e.preventDefault();
        body.animate({scrollTop:0}, 500, 'swing');

}); 

.toTop= classe dell'elemento cliccato forse imgoa


4
jQuery("html,body").animate({scrollTop: jQuery("#your-elemm-id-where you want to scroll").offset().top-<some-number>}, 500, 'swing', function() { 
       alert("Finished animating");
    });

0

devi vedere questo

$(function () {
        $('a[href*="#"]:not([href="#"])').click(function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });

o provali

$(function () {$('a').click(function () {
$('body,html').animate({
    scrollTop: 0
}, 600);
return false;});});

0
$("body").stop().animate({
        scrollTop: 0
    }, 500, 'swing', function () {
        console.log(confirm('Like This'))
    }
);

0

puoi usare sia la classe CSS che l'ID HTML, per mantenerlo simmetrico uso sempre la classe CSS per esempio

<a class="btn btn-full js--scroll-to-plans" href="#">I’m hungry</a> 
|
|
|
<section class="section-plans js--section-plans clearfix">
$(document).ready(function () {
    $('.js--scroll-to-plans').click(function () {
        $('body,html').animate({
            scrollTop: $('.js--section-plans').offset().top
        }, 1000);
        return false;})
});
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.