Eu tenho uma página onde uma barra de rolagem contendo linhas de tabela com divs é gerada dinamicamente a partir do banco de dados. Cada linha da tabela age como um link, como você veria em uma lista de reprodução do YouTube ao lado do player de vídeo.

Quando um usuário visita a página, a opção em que ele está deve ir para o topo da div de rolagem. Esta funcionalidade está funcionando. O problema é que isso vai longe demais. Por exemplo, a opção em que estão ativados é cerca de 10 px muito alta. Assim, a página é visitada, a url é usada para identificar qual opção foi selecionada e então rola essa opção para o topo da div de rolagem. Nota: Esta não é a barra de rolagem da janela, é um div com uma barra de rolagem.

Estou usando este código para mover a opção selecionada para o topo do div:

var pathArray = window.location.pathname.split( '/' );

var el = document.getElementById(pathArray[5]);

el.scrollIntoView(true);

Ele o move para o topo do div, mas cerca de 10 pixels acima. Alguém sabe como consertar isso?

Se for cerca de 10 px, então eu acho que você poderia simplesmente ajustar manualmente o divdeslocamento de rolagem de contendo assim:

el.scrollIntoView(true);
document.getElementById("containingDiv").scrollTop -= 10;

Role suavemente para uma posição adequada

Obtenha a y coordenada correta e usewindow.scrollTo({top: y, behavior: 'smooth'})

const id = 'profilePhoto';
const yOffset = -10; 
const element = document.getElementById(id);
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;

window.scrollTo({top: y, behavior: 'smooth'});

Você pode fazer isso em duas etapas:

el.scrollIntoView(true);
window.scrollBy(0, -10); // Adjust scrolling with a negative value here

Posicione a âncora pelo método absoluto

Outra maneira de fazer isso é posicionar suas âncoras exatamente onde você deseja na página, em vez de depender da rolagem por deslocamento. Acho que permite um melhor controle para cada elemento (por exemplo, se você quiser um deslocamento diferente para certos elementos) e também pode ser mais resistente a alterações / diferenças de API do navegador.

<div id="title-element" style="position: relative;">
  <div id="anchor-name" style="position: absolute; top: -100px; left: 0"></div>
</div>

Agora, o deslocamento é especificado como -100px em relação ao elemento. Crie uma função para criar esta âncora para reutilização de código ou, se estiver usando uma estrutura JS moderna, como React, faça isso criando um componente que renderiza sua âncora e passe o nome da âncora e o alinhamento de cada elemento, que pode ou pode não ser o mesmo.

Depois é só usar:

const element = document.getElementById('anchor-name')
element.scrollIntoView({ behavior: 'smooth', block: 'start' });

Para uma rolagem suave com um deslocamento de 100 px.

Resolvi esse problema usando,

element.scrollIntoView({ behavior: 'smooth', block: 'center' });

Isso faz com que o elemento apareça centerapós a rolagem, então não preciso calcular yOffset.

Espero que ajude...

Isso funciona para mim no Chrome (com rolagem suave e sem hacks de tempo)

Ele apenas move o elemento, inicia a rolagem e o move de volta.

Não há "popping" visível se o elemento já estiver na tela.

pos = targetEle.style.position;
top = targetEle.style.top;
targetEle.style.position = 'relative';
targetEle.style.top = '-20px';
targetEle.scrollIntoView({behavior: 'smooth', block: 'start'});
targetEle.style.top = top;
targetEle.style.position = pos;

Com base em uma resposta anterior, estou fazendo isso em um projeto Angular5.

Começou com:

// el.scrollIntoView(true);
el.scrollIntoView({
   behavior: 'smooth',
   block: 'start'
});
window.scrollBy(0, -10); 

Mas isso deu alguns problemas e precisava setTimeout para scrollBy () como este:

//window.scrollBy(0,-10);
setTimeout(() => {
  window.scrollBy(0,-10)
  }, 500);

E funciona perfeitamente no MSIE11 e no Chrome 68+. Não testei no FF. 500ms era o menor atraso que eu arriscaria. Ir mais baixo às vezes falhava porque a rolagem suave ainda não havia sido concluída. Ajuste conforme necessário para seu próprio projeto.

+1 para Fred727 por esta solução simples, mas eficaz.

Supondo que você deseja rolar para os divs que estão todos no mesmo nível no DOM e têm o nome de classe "scroll-with-offset", então este CSS resolverá o problema:

.scroll-with-offset {    
  padding-top: 100px;
  margin-bottom: -100px;
}

O deslocamento do topo da página é 100px. Só funcionará como pretendido com o bloco: 'start':

element.scrollIntoView({ behavior: 'smooth', block: 'start' });

O que está acontecendo é que o ponto superior dos divs está no local normal, mas seu conteúdo interno começa 100px abaixo do local normal. É para isso que serve o padding-top: 100px. margin-bottom: -100px é para compensar a margem extra do div abaixo. Para tornar a solução completa, também adicione este CSS para compensar as margens / preenchimentos dos divs mais altos e mais baixos:

.top-div {
  padding-top: 0;
}
.bottom-div {
  margin-bottom: 0;
}

Esta solução pertence a @ Arseniy-II , acabei de simplificá-la em uma função.

function _scrollTo(selector, yOffset = 0){
  const el = document.querySelector(selector);
  const y = el.getBoundingClientRect().top + window.pageYOffset + yOffset;

  window.scrollTo({top: y, behavior: 'smooth'});
}

Uso (você pode abrir o console aqui mesmo no StackOverflow e testá-lo):

_scrollTo('#question-header', 0);

Você também pode usar as element.scrollIntoView() opções

el.scrollIntoView(
  { 
    behavior: 'smooth', 
    block: 'start' 
  },
);

que a maioria dos navegadores suporta

Eu tenho isso e funciona perfeitamente para mim:

// add a smooth scroll to element
scroll(el) {
el.scrollIntoView({
  behavior: 'smooth',
  block: 'start'});

setTimeout(() => {
window.scrollBy(0, -40);
}, 500);}

Espero que ajude.

Outra solução é usar "offsetTop", assim:

var elementPosition = document.getElementById('id').offsetTop;

window.scrollTo({
  top: elementPosition - 10, //add your necessary value
  behavior: "smooth"  //Smooth transition to roll
});

Então, talvez isso seja um pouco desajeitado, mas até agora tudo bem. Estou trabalhando no angular 9.

Arquivo .ts

scroll(el: HTMLElement) {
  el.scrollIntoView({ block: 'start',  behavior: 'smooth' });   
}

Arquivo .html

<button (click)="scroll(target)"></button>
<div  #target style="margin-top:-50px;padding-top: 50px;" ></div>

Eu ajusto o deslocamento com margem e tampo de enchimento.

Saludos!

Encontrou uma solução alternativa. Digamos que você queira rolar para um div, Elemento aqui, por exemplo, e deseja ter um espaçamento de 20px acima dele. Defina o ref como um div criado acima dele:

<div ref={yourRef} style={{position: 'relative', bottom: 20}}/> <Element />

Isso criará o espaçamento que você deseja.

Se você tiver um cabeçalho, crie um div vazio também atrás do cabeçalho e atribua a ele uma altura igual à altura do cabeçalho e faça referência a ele.

Minha idéia principal é criar um tempDiv acima da vista que nós queremos para ir até. Funcionou bem sem atrasos no meu projeto.

scrollToView = (element, offset) => {
    var rect = element.getBoundingClientRect();
    var targetY = rect.y + window.scrollY - offset;

    var tempDiv;
    tempDiv = document.getElementById("tempDiv");
    if (tempDiv) {
        tempDiv.style.top = targetY + "px";
    } else {
        tempDiv = document.createElement('div');
        tempDiv.id = "tempDiv";
        tempDiv.style.background = "#F00";
        tempDiv.style.width = "10px";
        tempDiv.style.height = "10px";
        tempDiv.style.position = "absolute";
        tempDiv.style.top = targetY + "px";
        document.body.appendChild(tempDiv);
    }

    tempDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

Exemplo usando

onContactUsClick = () => {
    this.scrollToView(document.getElementById("contact-us"), 48);
}

Espero que ajude

Com base na resposta de Arseniy-II: Eu tinha o Caso de Uso em que a entidade de rolagem não era a própria janela, mas um Template interno (neste caso, um div). Neste cenário, precisamos definir um ID para o contêiner de rolagem e acessá-lo getElementByIdpara usar sua função de rolagem:

<div class="scroll-container" id="app-content">
  ...
</div>

const yOffsetForScroll = -100
const y = document.getElementById(this.idToScroll).getBoundingClientRect().top;
const main = document.getElementById('app-content');
main.scrollTo({
    top: y + main.scrollTop + yOffsetForScroll,
    behavior: 'smooth'
  });

Deixando aqui para o caso de alguém enfrentar situação semelhante!

Aqui estão meus 2 centavos.

Também tive o problema de scrollIntoView rolar um pouco além do elemento, então criei um script (javascript nativo) que precede um elemento para o destino, posicionei-o um pouco no topo com css e rolei até aquele. Depois de rolar, removo os elementos criados novamente.

HTML:

//anchor tag that appears multiple times on the page
<a href="#" class="anchors__link js-anchor" data-target="schedule">
    <div class="anchors__text">
        Scroll to the schedule
    </div>
</a>

//The node we want to scroll to, somewhere on the page
<div id="schedule">
    //html
</div>

Arquivo Javascript:

(() => {
    'use strict';

    const anchors = document.querySelectorAll('.js-anchor');

    //if there are no anchors found, don't run the script
    if (!anchors || anchors.length <= 0) return;

    anchors.forEach(anchor => {
        //get the target from the data attribute
        const target = anchor.dataset.target;

        //search for the destination element to scroll to
        const destination = document.querySelector(`#${target}`);
        //if the destination element does not exist, don't run the rest of the code
        if (!destination) return;

        anchor.addEventListener('click', (e) => {
            e.preventDefault();
            //create a new element and add the `anchors__generated` class to it
            const generatedAnchor = document.createElement('div');
            generatedAnchor.classList.add('anchors__generated');

            //get the first child of the destination element, insert the generated element before it. (so the scrollIntoView function scrolls to the top of the element instead of the bottom)
            const firstChild = destination.firstChild;
            destination.insertBefore(generatedAnchor, firstChild);

            //finally fire the scrollIntoView function and make it animate "smoothly"
            generatedAnchor.scrollIntoView({
                behavior: "smooth",
                block: "start",
                inline: "start"
            });

            //remove the generated element after 1ms. We need the timeout so the scrollIntoView function has something to scroll to.
            setTimeout(() => {
                destination.removeChild(generatedAnchor);
            }, 1);
        })
    })
})();

CSS:

.anchors__generated {
    position: relative;
    top: -100px;
}

Espero que isso ajude alguém!

Eu adiciono essas dicas de css para aqueles que não resolveram esse problema com as soluções acima:

#myDiv::before {
  display: block;
  content: " ";
  margin-top: -90px; // adjust this with your header height
  height: 90px; // adjust this with your header height
  visibility: hidden;
}

UPD: criei um pacote npm que funciona melhor do que a solução a seguir e mais fácil de usar.

Minha função smoothScroll

Peguei a solução maravilhosa de Steve Banton e escrevi uma função que a torna mais conveniente de usar. Seria mais fácil de usar window.scroll()ou até mesmo window.scrollBy(), como já tentei antes, mas esses dois têm alguns problemas:

• Tudo fica viciado depois de usá-los com um comportamento suave.
• Você não pode evitá-los de qualquer maneira e tem que esperar até o fim do livro. Espero que minha função seja útil para você. Além disso, há um polyfill leve que o faz funcionar no Safari e até no IE.

Aqui está o código

Basta copiá-lo e bagunçar como quiser.

import smoothscroll from 'smoothscroll-polyfill';

smoothscroll.polyfill();

const prepareSmoothScroll = linkEl => {
  const EXTRA_OFFSET = 0;

  const destinationEl = document.getElementById(linkEl.dataset.smoothScrollTo);
  const blockOption = linkEl.dataset.smoothScrollBlock || 'start';

  if ((blockOption === 'start' || blockOption === 'end') && EXTRA_OFFSET) {
    const anchorEl = document.createElement('div');

    destinationEl.setAttribute('style', 'position: relative;');
    anchorEl.setAttribute('style', `position: absolute; top: -${EXTRA_OFFSET}px; left: 0;`);

    destinationEl.appendChild(anchorEl);

    linkEl.addEventListener('click', () => {
      anchorEl.scrollIntoView({
        block: blockOption,
        behavior: 'smooth',
      });
    });
  }

  if (blockOption === 'center' || !EXTRA_OFFSET) {
    linkEl.addEventListener('click', () => {
      destinationEl.scrollIntoView({
        block: blockOption,
        behavior: 'smooth',
      });
    });
  }
};

export const activateSmoothScroll = () => {
  const linkEls = [...document.querySelectorAll('[data-smooth-scroll-to]')];

  linkEls.forEach(linkEl => prepareSmoothScroll(linkEl));
};

Para fazer um elemento de link, basta adicionar o seguinte atributo de dados:

data-smooth-scroll-to="element-id"

Além disso, você pode definir outro atributo como um complemento

data-smooth-scroll-block="center"

Representa a blockopção da scrollIntoView()função. Por padrão, é start. Leia mais sobre MDN .

Finalmente

Ajuste a função smoothScroll às suas necessidades.

Por exemplo, se você tem algum cabeçalho fixo (ou eu o chamo com a palavra masthead), pode fazer algo assim:

const mastheadEl = document.querySelector(someMastheadSelector);

// and add it's height to the EXTRA_OFFSET variable

const EXTRA_OFFSET = mastheadEl.offsetHeight - 3;

Se você não tiver esse caso, basta excluí-lo, por que não :-D.

Para um elemento em uma linha de tabela, use JQuery para obter a linha acima da que você deseja e simplesmente role até essa linha.

Suponha que eu tenha várias linhas em uma tabela, algumas das quais devem ser revisadas por e pelo administrador. Cada linha que requer revisão tem uma seta para cima e para baixo para levá-lo ao item anterior ou seguinte para revisão.

Aqui está um exemplo completo que deve ser executado se você criar um novo documento HTML no bloco de notas e salvá-lo. Há um código extra para detectar a parte superior e inferior de nossos itens para revisão, para que não ocorram erros.

<html>
<head>
    <title>Scrolling Into View</title>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <style>
        div.scroll { height: 6em; width: 20em; overflow: auto; }
        thead th   { position: sticky; top: -1px; background: #fff; }
        .up, .down { cursor: pointer; }
        .up:hover, .down:hover { color: blue; text-decoration:underline; }
    </style>
</head>
<body>
<div class='scroll'>
<table border='1'>
    <thead>
        <tr>
            <th>Review</th>
            <th>Data</th>
        </tr>
    </thead>
    <tbody>
        <tr id='row_1'>
            <th></th>
            <td>Row 1 (OK)</td>
        </tr>
        <tr id='row_2'>
            <th></th>
            <td>Row 2 (OK)</td>
        </tr>
        <tr id='row_3'>
            <th id='jump_1'><span class='up'>UP</span> <span class='down'>DN</span></th>
            <td>Row 3 (REVIEW)</td>
        </tr>
        <tr id='row_4'>
            <th></th>
            <td>Row 4 (OK)</td>
        </tr>
        <tr id='row_5'>
            <th id='jump_2'><span class='up'>UP</span> <span class='down'>DN</span></th>
            <td>Row 5 (REVIEW)</td>
        </tr>
        <tr id='row_6'>
            <th></th>
            <td>Row 6 (OK)</td>
        </tr>
        <tr id='row_7'>
            <th></th>
            <td>Row 7 (OK)</td>
        </tr>
        <tr id='row_8'>
            <th id='jump_3'><span class='up'>UP</span> <span class='down'>DN</span></th>
            <td>Row 8 (REVIEW)</td>
        </tr>
        <tr id='row_9'>
            <th></th>
            <td>Row 9 (OK)</td>
        </tr>
        <tr id='row_10'>
            <th></th>
            <td>Row 10 (OK)</td>
        </tr>
    </tbody>
</table>
</div>
<script>
$(document).ready( function() {
    $('.up').on('click', function() {
        var id = parseInt($(this).parent().attr('id').split('_')[1]);
        if (id>1) {
            var row_id = $('#jump_' + (id - 1)).parent().attr('id').split('_')[1];
            document.getElementById('row_' + (row_id-1)).scrollIntoView({behavior: 'smooth', block: 'start'});
        } else {
            alert('At first');
        }
    });

    $('.down').on('click', function() {
        var id = parseInt($(this).parent().attr('id').split('_')[1]);
        if ($('#jump_' + (id + 1)).length) {
            var row_id = $('#jump_' + (id + 1)).parent().attr('id').split('_')[1];
            document.getElementById('row_' + (row_id-1)).scrollIntoView({behavior: 'smooth', block: 'start'});
        } else {
            alert('At last');
        }
    });
});
</script>
</body>
</html>

Solução simples para rolar um elemento específico para baixo

const element = document.getElementById("element-with-scroll");
element.scrollTop = element.scrollHeight - 10;