it-swarm-pt.tech

JavaScript para rolar página longa para DIV

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

Um pouco como EnsureVisible em outros idiomas.

Eu verifiquei scrollTop e scrollTo mas eles parecem arenques vermelhos.

Alguém pode ajudar?

95
Angus McCoteup

pergunta antiga, mas se alguém acha isso através do google (como eu fiz) e quem não quer usar âncoras ou jquery; há uma função javascript embutida para "pular" para um elemento;

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

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

367
futtta

Se você não quiser adicionar uma extensão extra, o código a seguir deve funcionar com o 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;
        }
    });
23
Josh
22
George Mauer
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

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

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

15
mjallday

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

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

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

Para construir uma rotina de "rolagem na visão" verdadeiramente geral do zero, você precisaria começar no nó que deseja expor, certificar-se de que ele está na parte visível de seu pai, depois repetir o mesmo para o pai, etc. o caminho até chegar ao topo.

Um passo disso seria algo parecido com isto (código não testado, não verificando casos de Borda):

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

Isso funcionou para mim

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

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

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

5
Chuck

Por que não uma âncora nomeada?

4
Bloodhound

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

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

Eu não sei como fazer a animação de rolagem Nice sem o uso de dojo ou algum kit de ferramentas como esse, mas se você só precisa pular para uma âncora, location.hash deve fazê-lo.

(testado no FF3 e no Safari 3.1.2)

4
Scott Swezey

Você pode usar o método Element.scrollIntoView() como foi mencionado acima. Se você deixá-lo sem parâmetros dentro, você terá um pergaminho instantâneo feio. Para evitar que você possa adicionar este parâmetro - behavior:"smooth".

Exemplo:

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

Basta substituir scroll-here-plz pelo seu div ou elemento em um site. E se você vir seu elemento na parte inferior de sua janela ou a posição não for a esperada, use 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.

4
Smelino

Eu não posso adicionar um comentário para a resposta de futtta acima, mas para um uso de rolagem mais suave:

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

Para 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;
      }
    }
  });
0
Swarnendu Paul

Eu pessoalmente achei a resposta baseada em jQuery de Josh acima para ser a melhor que vi, e trabalhei perfeitamente para a minha aplicação ... claro, eu estava usando jQuery ... eu certamente não teria incluído toda a biblioteca jq apenas para esse propósito.

Felicidades!

EDIT: OK ... tão poucos segundos depois de postar isso, eu vi outra resposta apenas abaixo meu (não tenho certeza se ainda abaixo de mim depois de uma edição) que disse para usar:

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

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

0
Lelando

Existe um plugin jQuery para o caso geral de rolagem para um elemento DOM, mas se o desempenho é 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. Aqui está minha solução preferida:

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

Ele usa casting de null para 0, o que não é apropriado Etiquette em alguns círculos, mas eu gosto :) A segunda parte usa window.scroll. Então, o resto da solução é:

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

Voila!

0
Andrey Fedorov

scrollTop (IIRC) é onde no documento o topo da página é rolado para. scrollTo rola a página para que a parte superior da página seja onde você especificar.

O que você precisa aqui é alguns estilos manipulados por Javascript. Digamos que se você quiser a div fora da tela e rolar a partir da direita, defina o atributo esquerdo da div para a largura da página e, em seguida, diminua por um valor definido a cada poucos segundos até que esteja onde você deseja.

Isso deve apontar você na direção certa.

Adicional: me desculpe, eu pensei que você queria um div separado para 'sair' de algum lugar (algo como este site às vezes), e não mover toda a página para uma seção. O uso adequado de âncoras atingiria esse efeito.

0
Benjamin Autin