Role de volta para o topo da div rolável


121
<div id="containerDiv"></div>
#containerDiv {
  position: absolute;
  top: 0px;
  width: 400px;
  height: 100%;
  padding: 5px;
  font-size: .875em;
  overflow-y: scroll;
}
document.getElementById("containerDiv").innerHTML = variableLongText;

Como redefinir a posição de rolagem de volta para o topo do div do contêiner na próxima vez?

Respostas:


206
var myDiv = document.getElementById('containerDiv');
myDiv.innerHTML = variableLongText;
myDiv.scrollTop = 0;

Veja o scrollTopatributo.


Tentei, mas não funcionou. Quando uma variávelLongtext é carregada no contêiner div e estou olhando para o meio dela, então deslize para a nova variávelLongtext, ela aparecerá no contêiner, mas não estaremos olhando para o topo dela, ela já estará rolando para baixo um pouco.
aqui

2
@ s12345 É melhor você fazer um caso de teste reproduzível mostrando-nos o seu problema (por exemplo, em jsfiddle.net ) e dizer em qual sistema operacional / navegador / versão você está experimentando.
Phrogz

2
Desculpe meu erro .. funciona! Ficou confuso com dois divs semelhantes.
imhere

63

Outra maneira de fazer isso com uma animação suave é assim

$("#containerDiv").animate({ scrollTop: 0 }, "fast");

7
Funciona bem, mas por favor não use slow, é tão ... lento!
Pascal

1
Em vez de passar slowcomo segundo argumento. Você pode passar um número inteiro que seria o número de milissegundos para a animação ser concluída.
Sushant Gupta

2
Mudou para rápido :)
Mahmoud Ibrahim

1
Melhor resposta! Obrigado!
YogaPanda

1
Isso funciona bem se você estiver usando jquery. Se você estiver usando o texto digitalizado angular (javascript simples), isso não funcionará. como você pode conseguir isso com javascript puro.
Babulaas

27

Tentei as respostas existentes para esta pergunta, e nenhuma delas funcionou no Chrome para mim. O que funcionou foi um pouco diferente:

$('body, html, #containerDiv').scrollTop(0);

16

scrollTo

window.scrollTo(0, 0);

é a solução definitiva para rolar as janelas para cima - a melhor parte é que não requer nenhum seletor de id e, mesmo se usarmos a estrutura IFRAME, funcionará extremamente bem.

O método scrollTo () rola o documento até as coordenadas especificadas.
window.scrollTo (xpos, ypos);
Número xpos obrigatório. A coordenada para a qual rolar, ao longo do eixo x (horizontal), em pixels
ypos Número Obrigatório. A coordenada para a qual rolar, ao longo do eixo y (vertical), em pixels

jQuery

Outra opção para fazer o mesmo é usar jQuery e vai dar uma aparência mais suave para o mesmo

$('html,body').animate({scrollTop: 0}, 100);

onde 0 após o scrollTop especifica a posição da barra de rolagem vertical no pixel e o segundo parâmetro é um parâmetro opcional que mostra o tempo em microssegundos para concluir a tarefa.


1
e se quisermos apenas rolar uma div interna para o topo? Isso acabará não funcionando.
John Lord

1
Os elementos também têm o método .scrollTo, você pode fazerdocument.getElementById('scroller').scrollTo(0,0)
Mojimi

15

Isso funcionou para mim:

document.getElementById('yourDivID').scrollIntoView();

Esta é minha solução preferida. Para uma transição suave, adicione isto:document.getElementById("yourDivID").scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})
Chris

Além disso, observe que scollIntoViewsó funciona se você chamá-lo no elemento que deve ser rolado. Em outras palavras, não chamá-lo no elemento que você quer para se deslocar para , chamá-lo no elemento que você deseja rolar.
Chris

9

Para aqueles que ainda não conseguiram fazer esse trabalho, certifique-se de que o elemento transbordado seja exibido antes de usar a função jQuery .

Exemplo:

$('#elem').show();
$('#elem').scrollTop(0);

1
Protetor de vida! Estava começando a perder a vontade de viver com o scrollTop não funcionando! tive que colocar minha chamada scrollTop em uma função setTimeout.
AVFC_Bubble88 01 de

Eu sinto o mesmo! Eu estava trabalhando em uma caixa de diálogo modal de bootstrap. Tive que configurar um evento para o modal que não reiniciou a barra de rolagem até que o modal parou de animar. Este é o código que usei: $ ('# add_modal'). On ('shown.bs.modal', function (e) {$ ('div.border'). ScrollTop (0);});
Irv Lennert

2

Para mim, o modo scrollTop não funcionou, mas encontrei outro:

element.style.display = 'none';
setTimeout(function() { element.style.display = 'block' }, 100);

Não foi verificado o tempo mínimo para renderização de css confiável, 100 ms pode ser um exagero.


2

Se quiser rolar com uma transição suave, você pode usar isso!

(Vanilla JS)

const tabScroll = document.getElementById("tabScroll");
window.scrollTo({
  'behavior': 'smooth',
  'left': 0,
  'top': tabScroll.offsetTop - 80
});

Se seus usuários-alvo são Chrome e Firefox , então isso é bom! Mas, infelizmente, esse método não é bem suportado em todos os navegadores. Verifique aqui

Espero que isto ajude!!


2

De acordo com a resposta de François Noël "Para aqueles que ainda não conseguiram fazer este trabalho, certifique-se de que o elemento transbordado seja exibido antes de usar a função jQuery."

Eu estava trabalhando em um modal de bootstrap que repetidamente exibo com permissões de conta em uma div que transborda na dimensão y. Meu problema era que eu estava tentando usar a função jquery .scrollTop (0) e ela não funcionava, não importa o quanto eu tentasse. Tive que configurar um evento para o modal que não zera a barra de rolagem até que o modal parasse de animar. O código que finalmente funcionou para mim está aqui:

    $('#add-modal').on('shown.bs.modal', function (e) {
        $('div.border').scrollTop(0);
    });

1

Se o conteúdo html estourar uma única janela de visualização, funcionou para mim usando apenas javascript:

document.getElementsByTagName('body')[0].scrollTop = 0;

Saudações,


1

Esta é a única maneira que funcionou para mim, com transição de rolagem suave:

  $('html, body').animate({
    scrollTop: $('#containerDiv').offset().top,
  }, 250);

1

Ao obter o elemento pelo nome da classe, não se esqueça que o valor de retorno é um array; Daí este código:

document.getElementByClassName("dropdown-menu").scrollTop = 0

Não funcionaria. Use o código abaixo.

document.getElementByClassName("dropdown-menu")[0].scrollTop = 0

Achei que outras pessoas poderiam encontrar um problema semelhante ao que eu; então isso deve funcionar.


0

esses dois códigos funcionaram perfeitamente para mim, este primeiro levará para rolar para o topo da página, mas se você quiser rolar para algum div específico, use o segundo com seu id de div.

$('body, html, #containerDiv').scrollTop(0);
document.getElementById('yourDivID').scrollIntoView();

Se você quiser rolar até por um nome de classe, use o código abaixo

var $container = $("html,body");
var $scrollTo = $('.main-content');

$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);

0

O ID deve ter o id do div correspondente que possui a propriedade overflow css.

document.querySelector('#YOUR_OVERFLOWED_DIV').scrollTop = 0;

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.