JQuery – jak animować przewijanie do góry i przewijanie do div?

javascript

JQuery ma poręczną funkcję prototype animate, która jako pierwszy parametr przyjmuje końcowe właściwości CSS, a jako drugi parametr prędkość, np. „szybko", „wolno” lub określony interwał czasowy. Trzeci parametr jest opcjonalnym wywołaniem zwrotnym po animacji skończone.

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

Na mojej osobistej stronie internetowej ostatnio przeprojektowałem wygląd strony, aby była w pełni przyjazna dla użytkowników mobilnych. W stałych pozycjach ekranu znajdują się dwa łącza: „Nawigacja” i „Góra”.

Nawigacja

Menu nawigacyjne znajduje się po głównej zawartości strony, dlatego należy zdefiniować div za pomocą np. id=’navigate’. Następnie dodaj następujący kod JQuery .

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

Top

Najpierw musisz zdefiniować kotwicę za pomocą np

Umieść to zaraz po i dodaj następujący kod JQuery :

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

zwój