JavaScript para rolar a página longa para DIV

Eu tenho um link em uma longa página HTML. Quando clico nele, desejo que um divem outra parte da página fique visível na janela, rolando para a visualização.

Um pouco como EnsureVisibleem outras línguas.

Eu verifiquei scrollTope scrollTomas eles parecem uma pista falsa.

Alguém pode ajudar?

pergunta antiga, mas se alguém achar isso pelo google (como eu fiz) e não quiser usar âncoras ou jquery; há uma função javascript embutida para 'pular' para um elemento;

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

e o que é ainda melhor; de acordo com as ótimas tabelas de compatibilidade no quirksmode, isso é suportado por todos os principais navegadores !

Se você não quiser adicionar uma extensão extra, o código a seguir deve funcionar com jQuery.

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });

Que tal o JQuery ScrollTo - veja este código de amostra

<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

<A name='myAnchorALongWayDownThePage"></a>

Nenhuma rolagem extravagante, mas deve levá-lo até lá.

A dificuldade com a rolagem é que você pode não apenas precisar rolar a página para mostrar um div, mas também pode precisar rolar dentro de divs roláveis ​​em qualquer número de níveis.

A propriedade scrollTop está disponível em qualquer elemento DOM, incluindo o corpo do documento. Ao defini-lo, você pode controlar até que ponto algo é rolado para baixo. Você também pode usar as propriedades clientHeight e scrollHeight para ver quanta rolagem é necessária (a rolagem é possível quando clientHeight (janela de visualização) é menor que scrollHeight (a altura do conteúdo).

Você também pode usar a propriedade offsetTop para descobrir onde um elemento está localizado no contêiner.

Para construir uma rotina verdadeiramente geral de "rolar para ver" do zero, você precisa começar no nó que deseja expor, certifique-se de que esteja na parte visível de seu pai e, em seguida, repita o mesmo para o pai, etc, todos o caminho até chegar ao topo.

Uma etapa seria mais ou menos assim (código não testado, sem verificar casos extremos):

function scrollIntoView(node) {
  var parent = node.parent;
  var parentCHeight = parent.clientHeight;
  var parentSHeight = parent.scrollHeight;
  if (parentSHeight > parentCHeight) {
    var nodeHeight = node.clientHeight;
    var nodeOffset = node.offsetTop;
    var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
    parent.scrollTop = scrollOffset;
  }
  if (parent.parent) {
    scrollIntoView(parent);
  }
}

Você pode usar o Element.scrollIntoView()método mencionado acima. Se você deixá-lo sem parâmetros internos, terá uma rolagem feia instantânea . Para evitar isso, você pode adicionar este parâmetro - behavior:"smooth".

Exemplo:

document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

Basta substituir scroll-here-plzpelo seu divelemento ou em um site. E se você vir seu elemento na parte inferior da janela ou a posição não for o que você esperava, brinque com o parâmetro block: "". Você pode usar block: "start", block: "end"ou block: "center".

Lembre-se: sempre use parâmetros dentro de um objeto {}.

Se você ainda tiver problemas, vá para https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Existe documentação detalhada para este método.

Isso funcionou para mim

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

Resposta postada aqui - mesma solução para o seu problema.

Edit: a resposta JQuery é muito boa se você quiser uma rolagem suave - eu não tinha visto isso em ação antes.

Por que não uma âncora nomeada?

A propriedade de que você precisa é location.hash. Por exemplo:

location.hash = 'top'; // pularia para a âncora nomeada "topo

Não sei como fazer a bela animação de rolagem sem o uso do dojo ou algum kit de ferramentas como esse, mas se você só precisa ir para uma âncora, location.hash deve fazer isso.

(testado em FF3 e Safari 3.1.2)

Não posso adicionar um comentário à resposta de futtta acima, mas para uma rolagem mais suave, use:

onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"

scrollTop (IIRC) é onde no documento a parte superior da página é rolada. scrollTo rola a página de modo que o topo da página seja o local especificado.

O que você precisa aqui é de alguns estilos manipulados por Javascript. Digamos que se você quisesse o div fora da tela e rolar para a direita, definiria o atributo esquerdo do div para a largura da página e, em seguida, diminuiria em um determinado valor a cada poucos segundos até que estivesse onde deseja.

Isso deve apontar a direção certa.

Adicional: sinto muito, pensei que você queria que um div separado 'aparecesse' de algum lugar (mais ou menos como este site faz às vezes) e não movesse a página inteira para uma seção. O uso adequado de âncoras alcançaria esse efeito.

Existe um plugin jQuery para o caso geral de rolar para um elemento DOM, mas se o desempenho for um problema (e quando não é?), Sugiro fazê-lo manualmente. Isso envolve duas etapas:

1. Encontrar a posição do elemento para o qual você está rolando.
2. Rolando para essa posição.

quirksmode dá uma boa explicação do mecanismo por trás do primeiro. Esta é minha solução preferida:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

Ele usa conversão de nulo para 0, o que não é a etiqueta apropriada em alguns círculos, mas eu gosto :) A segunda parte usa window.scroll. Portanto, o resto da solução é:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

Voila!

Eu pessoalmente achei a resposta baseada em jQuery de Josh acima a melhor que eu vi, e funcionou perfeitamente para meu aplicativo ... claro, eu já estava usando jQuery ... Eu certamente não teria incluído toda a biblioteca jQ apenas para isso um propósito.

Felicidades!

EDITAR: OK ... poucos segundos depois de postar isso, vi outra resposta logo abaixo da minha (não tenho certeza se ainda está abaixo de mim após uma edição) que dizia para usar:

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

Isso funciona perfeitamente e em muito menos código do que a versão jQuery! Eu não tinha ideia de que havia uma função interna em JS chamada .scrollIntoView (), mas aí está! Então, se você quiser uma animação sofisticada, vá para jQuery. Rápido e sujo ... use este!

Para uma rolagem suave, este código é útil

$('a[href*=#scrollToDivId]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - head_height
        }, 1000);
        return false;
      }
    }
  });

Corrija-me se eu estiver errado, mas estou lendo a pergunta repetidamente e ainda acho que Angus McCoteup estava perguntando como definir um elemento para ser posição: fixo.

Angus McCoteup, verifique http://www.cssplay.co.uk/layouts/fixed.html - se você quiser que seu DIV se comporte como um menu ali, dê uma olhada em um CSS ali