Role de volta para o topo da div rolável

<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?

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

Veja o scrollTopatributo.

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

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

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);

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.

Isso funcionou para mim:

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

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);

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.

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!!

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);
    });

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,

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

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

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.

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);

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

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