Ustawiam przewijanie strony do góry po kliknięciu przycisku. Ale najpierw użyłem instrukcji if, aby sprawdzić, czy góra strony nie jest ustawiona na 0. Następnie, jeśli nie jest to 0, animuję stronę, aby przewijała się do góry.

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

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

Trudną częścią jest teraz animowanie czegoś PO przewinięciu strony do góry. Więc moja następna myśl to dowiedzieć się, jaka jest pozycja strony. Więc użyłem dziennika konsoli, aby się dowiedzieć.

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

Dało mi to wynik 365, zgaduję, że jest to numer pozycji, na której byłem tuż przed przewinięciem do góry.

Moje pytanie brzmi: jak ustawić pozycję na 0, aby móc dodać kolejną animację, która działa, gdy strona jest na 0?

Dzięki!

Aby to zrobić, możesz ustawić funkcję zwrotną dla polecenia animacji, która zostanie wykonana po zakończeniu animacji przewijania.

Na przykład:

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

Tam, gdzie jest ten kod alertu, możesz wykonać więcej javascript, aby dodać do dalszej animacji.

Również „swing” służy do ustawiania luzowania. Sprawdź http://api.jquery.com/animate/, aby uzyskać więcej informacji.

Wypróbuj ten kod:

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

Użyj tego:

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

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

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

});

do tego możesz użyć metody callback

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

Spróbuj tego zamiast tego:

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');
      });
}

Proste rozwiązanie:

przewijanie do dowolnego elementu według ID lub NAZWY:

SmoothScrollTo("#elementId", 1000);

kod:

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;
    });
}

Kod z funkcją kliknięcia ()

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

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

}); 

.toTop= klasa klikniętego elementu może imgluba

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

musisz to zobaczyć

$(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;
                }
            }
        });
    });

lub wypróbuj je

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

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

możesz użyć zarówno klasy CSS, jak i identyfikatora HTML, aby zachować symetrię, na przykład zawsze używam klasy CSS

<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;})
});