Animar a rolagem para o ID no carregamento da página

123

Estou tentando animar a rolagem para um ID específico no carregamento da página. Eu fiz muitas pesquisas e me deparei com isso:

$("html, body").animate({ scrollTop: $('#title1').height() }, 1000);

mas isso parece começar do ID e animar até o topo da página?

O HTML (que está no meio da página) é simplesmente:

<h2 id="title1">Title here</h2>
jquery scroll jquery-animate Adi
fonte
1
Isso não é muita resposta, mas eu recomendo o plugin "scrollTo" de Ariel Flesler; ele tem muitos recursos para percorrer uma página e algumas extensões do plug-in para casos comuns (por exemplo, você pode achar o plug-in "LocalScroll" útil para rolar para o href de um link, se estiver na mesma página). Você pode obter o plugin aqui: flesler.blogspot.com/2007/10/jqueryscrollto.html
Faisal

Respostas:

327

Você está apenas rolando a altura do seu elemento. offset () retorna as coordenadas de um elemento em relação ao documento e topparam fornecerá a distância do elemento em pixels ao longo do eixo y:

$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);

E você também pode adicionar um atraso a ele:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);
BumbleB2na
fonte
1
O que é a rolagem automática que me faz "WOW COOL !!"? Talvez seja a simplicidade da sua solução.
theblang
Eu precisava rolar um elemento para exibição no carregamento da página, mas tinha dois problemas: a) o uso de "html, body" forneceu dois retornos de chamada (um para cada elemento correspondente). b) Depende do navegador qual corpo ou html funciona. Então, criei uma essência que você pode adaptar para usar em seu projeto para garantir que a rolagem para exibição funcione em "qualquer navegador" e que você receberá apenas um retorno de chamada quando a animação terminar. gist.github.com/netsi1964/4ddffe1ae14e05220d25
Netsi1964
2
Isso não está realmente correto. Você realmente deve considerar a posição atual do corpo ou elemento que estamos tentando fazer scroll. Com isso em mente, você adicionaria a posição de rolagem atual de bodyà offset().topposição do elemento que queremos visualizar. A soma resultante é o valor para o qual desejamos rolar. $('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);
mattdevio
@magreenberg você já tentou isso? Se a posição atual da rolagem estiver acima do valor 0, o que você está sugerindo pode não funcionar. Digamos que o contêiner rolável tenha 1000 pixels de altura e a posição atual de rolagem seja 1000. Digamos que o elemento para o qual você está rolando se situe no centro vertical a 500. Acho que o que você está sugerindo indica para rolar para 1500 , certo?
BumbleB2na
@ BumbleB2na .offset().topdaria a você um número negativo neste caso. E isso realmente funciona apenas para bodye, htmlcomo offset().topirá fornecer o deslocamento superior do documento, não o pai de rolagem pretendido.
mattdevio
12

Solução javascript pura com a função scrollIntoView () :

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});
<h2 id="title1">Some title</h2>
Expandir snippet

O parâmetro 'smooth' do PS agora funciona no Chrome 61 como julien_c mencionado nos comentários.

Vladimir Vovk
fonte
1
Funciona agora (no Chrome 61)
julien_c 20/10
Verifique a compatibilidade do navegador. A partir de 10/2018, o IE (11), Edge e Safari suportam "scrollIntoView", mas não a opção "suave".
metal_jacke1
JS puro ftw. Obrigado por esse trecho! Suave como creme amanteigado duplo
jean d'arme
3

Existe um plugin jquery para isso. Rola o documento para um elemento específico, para que fique perfeitamente no meio da janela de exibição. Ele também suporta atenuações de animação, para que o efeito de rolagem fique super suave. Verifique este link .

No seu caso, o código é

$("#title1").animatedScroll({easing: "easeOutExpo"});
Eugene Tiurin
fonte
"Ele também suporta flexibilizações de animação para que o efeito de rolagem fique super suave" Infelizmente, isso não é verdadeiro. Se o computador estiver lento por algum motivo, ele continua pulando sem realmente se mover corretamente.
Brunoais
A rolagem suave exige que muitos pixels sejam calculados. Certamente, um "computador" lento (mais GPU) não pode fazer isso, mas devido à falta de ALUs suficientes. Então, geralmente ele está certo. E realmente fácil rolagem lib.
Roland
1

tente com o seguinte código. faça elementos com o nome da classe rolagem de página e mantenha o nome da identificação nos hreflinks correspondentes

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });
Akhil
fonte
-3

para rolagem simples, use o seguinte estilo

altura: 200 px; estouro: rolagem;

e use esta classe de estilo que div ou seção você deseja mostrar

milímetros
fonte