JQuery – Hur animerar man rullning till toppen och rullning till en Div?

javascript

JQuery har en praktisk funktion prototyp animate som tar de första slutliga CSS- egenskaperna som den första parametern och hastigheten som den andra parametern t.ex. "snabb", "långsam" eller det angivna tidsintervallet. Den tredje parametern är en valfri återuppringning efter att animeringen är färdiga.

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

På min personliga webbplats har jag nyligen designat om sidans outlook för att göra den helt mobilanvändarvänlig. Det finns två länkar på fasta positioner på skärmen, "Navigering" och "Topp".

Navigering

Navigeringsmenyn är placerad efter sidans huvudinnehåll, och därför skulle du behöva definiera en div med t.ex. id=’navigera’. Lägg sedan till följande JQuery -kod.

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

Topp

Du skulle först behöva definiera ett ankare med t.ex

Placera detta direkt efter och lägg till följande JQuery -kod:

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

skrolla