JQuery – Como animar a rolagem para o topo e a rolagem para um div?

javascript

JQuery tem um protótipo de função útil animate que leva as primeiras propriedades CSS finais como o primeiro parâmetro, e a velocidade como o segundo parâmetro, por exemplo, "rápido", "lento" ou o intervalo de tempo especificado. O terceiro parâmetro é um retorno de chamada opcional após a animação ser finalizado.

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

Recentemente, no meu site pessoal, redesenhei a perspectiva da página para torná-la totalmente amigável ao usuário móvel. Há dois links em posições fixas da tela, ‘Navigation’ e ‘Top’.

Navegação

O menu de navegação é colocado após o conteúdo principal da página e, portanto, você precisaria definir um div com, por exemplo, id=’navigate’. Em seguida, adicione o seguinte código JQuery .

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

Topo

Você precisaria primeiro definir uma âncora com, por exemplo,

<a name='top'></a>

Coloque isso logo após e adicione o seguinte código JQuery :

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

rolagem