JQuery – Kuinka animoida vierittäminen alkuun ja vieritys Diviin?

javascript

JQueryssa on kätevä funktion prototyyppi animate, joka ottaa ensimmäiset lopulliset CSS -ominaisuudet ensimmäiseksi parametriksi ja nopeuden toiseksi parametriksi, esim. "fast", "slow" tai määritetty aikaväli. Kolmas parametri on valinnainen takaisinsoitto animaation jälkeen. valmis.

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

Suunnittelin äskettäin henkilökohtaisen verkkosivustoni ulkoasun uudelleen, jotta se olisi täysin mobiilikäyttäjäystävällinen. Näytön kiinteissä kohdissa on kaksi linkkiä, ‘Navigointi’ ja ‘Yläosa’.

Navigointi

Navigointivalikko on sivun pääsisällön jälkeen, joten sinun on määritettävä div esim. id=’navigate’. Lisää sitten seuraava JQuery – koodi.

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

Ylös

Sinun pitäisi ensin määritellä ankkuri esim

Aseta tämä heti perään ja lisää seuraava JQuery – koodi:

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

rullaa