Ich habe die Seite so eingestellt, dass sie nach oben rollt, wenn auf eine Schaltfläche geklickt wird. Aber zuerst habe ich eine if-Anweisung verwendet, um festzustellen, ob der obere Rand der Seite nicht auf 0 gesetzt wurde. Wenn es nicht 0 ist, animiere ich die Seite, um nach oben zu scrollen.

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

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

Der schwierige Teil besteht nun darin, etwas zu animieren, nachdem die Seite nach oben gescrollt hat. Mein nächster Gedanke ist also, herauszufinden, wie die Seitenposition ist. Also habe ich das Konsolenprotokoll verwendet, um es herauszufinden.

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

Dies ergab ein Ergebnis von 365, ich schätze, das ist die Positionsnummer, an der ich mich gerade befand, bevor ich nach oben gescrollt habe.

Meine Frage ist, wie ich die Position auf 0 setze, damit ich eine weitere Animation hinzufügen kann, die ausgeführt wird, sobald die Seite bei 0 ist.

Vielen Dank!

Dazu können Sie eine Rückruffunktion für den Animationsbefehl festlegen, die nach Abschluss der Bildlaufanimation ausgeführt wird.

Beispielsweise:

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

Wo sich dieser Warncode befindet, können Sie mehr Javascript ausführen, um weitere Animationen hinzuzufügen.

Auch die "Schaukel" dient dazu, die Lockerung einzustellen. Weitere Informationen finden Sie unter http://api.jquery.com/animate/ .

Versuchen Sie diesen Code:

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

Benutze das:

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

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

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

});

Hierfür können Sie die Rückrufmethode verwenden

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

Versuchen Sie stattdessen Folgendes:

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

Einfache Lösung:

Scrollen zu einem beliebigen Element nach ID oder NAME:

SmoothScrollTo("#elementId", 1000);

Code:

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

Code mit Klickfunktion ()

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

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

}); 

.toTop= Klasse des angeklickten Elements vielleicht imgodera

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

Das musst du sehen

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

oder probieren Sie sie aus

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

Sie können sowohl die CSS-Klasse als auch die HTML-ID verwenden. Um sie symmetrisch zu halten, verwende ich beispielsweise immer die CSS-Klasse

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