JQuery – Wie animiert man das Scrollen nach oben und das Scrollen zu einem Div?

Javascript

JQuery hat einen praktischen Funktionsprototypen animiert, der als ersten Parameter zunächst finale CSS – Eigenschaften übernimmt und als zweiten Parameter die Geschwindigkeit, z. B. „schnell”, „langsam” oder das angegebene Zeitintervall. Der dritte Parameter ist ein optionaler Rückruf nach der Animation fertig.

var properties = { color: red; };
$('div').animate(properties, "fast", function() {});

Auf meiner persönlichen Website habe ich kürzlich den Seitenausblick neu gestaltet, um ihn vollständig benutzerfreundlich für Mobilgeräte zu machen. Es gibt zwei Links an festen Positionen des Bildschirms, „Navigation” und „Top”.

Navigation

Das Navigationsmenü befindet sich nach dem Hauptinhalt der Seite, und daher müssten Sie ein div mit zB id=’navigate’ definieren. Fügen Sie dann den folgenden JQuery -Code hinzu.

$("a[href='#navigate']").click(function(){
    $("html, body").stop().animate(
        {scrollTop:$("div#navigate").offset().top}, "slow");
        return false;
    })
});

oben

Sie müssten zuerst einen Anker mit zB definieren

Platzieren Sie dies direkt danach und fügen Sie den folgenden JQuery -Code hinzu:

$("a[href='#top']").click(function(){
    $("html, body").stop().animate(
        {scrollTop:0}, "slow");
        return false;
    })
});

scrollen