javascript - div - scrollintoview is not a function

Usar scrollIntoView con un encabezado de posición fijo

Question

Tengo un sitio con un encabezado establecido en position: fixed . En una de mis páginas, uso scrollIntoView(true) en un elemento. Mi problema es que cuando se llama a scrollIntoView , el elemento se coloca debajo del encabezado. ¿Cómo arreglaría esto para que el elemento se muestre justo debajo del encabezado?

Estoy usando el framework Bootstrap y el encabezado está diseñado con la navbar navbar-fixed-top .

Answer 1

El siguiente código produce un desplazamiento suave hacia la parte superior del elemento con un desplazamiento para el encabezado fijo:

var topOfElement = document.querySelector(''#targetElement'').offsetTop - XX;
window.scroll({ top: topOfElement, behavior: "smooth" });

Donde XX es la altura de su encabezado fijo.

Answer 2

En caso de que alguien haya arreglado la barra de navegación que oculta Header / Title después de desplazarse, aquí está la solución (basada en la @coco puffs de @coco puffs y esta ):

let anchorLinks = document.querySelectorAll(''a[href^="#"]'')

for (let item of anchorLinks) {
  item.addEventListener(''click'', (e) => {
    let hashVal = item.getAttribute(''href'')
    let topOfElement = document.querySelector(hashVal).offsetTop - 70

    window.scroll({ top: topOfElement, behavior: "smooth" })
    history.pushState(null, null, hashVal)
    e.preventDefault()
  })
}

En el código 70px se usan.

Answer 3

Es un poco raro, pero aquí hay una solución.

var node = ''select your element'';
var yourHeight = ''height of your fixed header'';

// scroll to your element
node.scrollIntoView(true);

// now account for fixed header
var scrolledY = window.scrollY;

if(scrolledY){
  window.scroll(0, scrolledY - yourHeight);
}

Answer 4

Puede resolver esto con CSS, aplicando un padding-top y un margin-top negativo margin-top a los elementos a los que desea desplazarse.

Demo

document.querySelector(''.scroll-to-working-inline'').addEventListener(''click'', function() {
  document.querySelector(''.working-inline'').scrollIntoView();
});

document.querySelector(''.scroll-to-working-block'').addEventListener(''click'', function() {
  document.querySelector(''.working-block'').scrollIntoView();
});

document.querySelector(''.scroll-to-broken'').addEventListener(''click'', function() {
  document.querySelector(''.broken'').scrollIntoView();
});

body {
  margin: 0;
  padding-top: 60px;
}

header {
  position: fixed;
  top: 0;
  background-color: tomato;
  color: white;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

[class^=''working''],
[class^=''broken''] {
  font-size: 3rem;
}

.working-inline {
  padding-top: 60px;
  margin-top: -60px;
}

.working-block {
  padding-top: 60px;
  margin-top: -60px;
}

<header>
  scroll to...
  <button class="scroll-to-working-inline">working inline element</button>
  <button class="scroll-to-working-block">working block element</button>
  <button class="scroll-to-broken">broken element</button>
</header>

<main>
  <p>Sql daemon epoch all your base are belong to us packet system perl semaphore. Interpreter warez pragma kilo worm back door baz continue chown blob unix Dennis Ritchie stack mutex bar throw fopen man pages linux. Sql suitably small values bit infinite loop pwned rm -rf.</p>
  
  <a class="working-inline">Working inline</a>
  
  <p>Syn baz man pages unix vi crack leapfrog semaphore fail pwned afk null socket cd long leet emacs Donald Knuth bin grep todo pragma stdio.h January 1, 1970. Alloc gc system new finally sql stack trace syn mainframe cat machine code memory leak server salt flood tunnel in back door thread. Bytes fatal throw ctl-c Dennis Ritchie over clock eof tera perl regex.</p>
  
  <div class="working-block">Working block element</div>
  
  <p>Public injection class unix malloc error script kiddies packet less fail int I''m sorry Dave, I''m afraid I can''t do that. Tarball memory leak double rsa pwned public all your base are belong to us. False bytes bang bar tarball semaphore warez cd port daemon exception mountain dew sql mainframe gcc ifdef chown private.</p>
  
  <div class="broken">Broken element</div>
  
  <p>Daemon bubble sort protected mutex overflow grep snarf crack warez I''m compiling bit if memory leak Starcraft nak script kiddies long it''s a feature. Hello world public server James T. Kirk injection terminal wannabee race condition syn alloc. Gobble leapfrog finally bypass concurrently while irc gurfle do back door blob man pages sql over clock.</p>
  
  <p>Char hello world then man pages ascii long salt while char fatal do boolean tunnel in system else foo packet sniffer float terminal int default. Trojan horse ssh ifdef /dev/null chown cache error protocol afk todo rm -rf mainframe piggyback pwned regex xss warez Starcraft try catch stdio.h bubble sort. It''s a feature I''m sorry Dave, I''m afraid I can''t do that *.* port bypass ip.</p>
  
  <p>Stdio.h epoch mutex flood wannabee do race condition sql access exception. Bar pragma man pages dereference flush todo highjack while buffer bit nak big-endian syn xss salt for d00dz. Leslie Lamport linux server error hexadecimal snarf tunnel in rm -rf firewall then shell all your base are belong to us.</p>

  <p>Ascii gcc grep int flood kilo linux access mailbomb hash *.* fork semaphore frack else win bar ssh Leslie Lamport. Man pages strlen cache gnu segfault tarball race condition perl packet sniffer root cookie private chown d00dz January 1, 1970. Rsa public crack bit warez throw for void concurrently ip mutex.</p>
  
  <p>Char hello world then man pages ascii long salt while char fatal do boolean tunnel in system else foo packet sniffer float terminal int default. Trojan horse ssh ifdef /dev/null chown cache error protocol afk todo rm -rf mainframe piggyback pwned regex xss warez Starcraft try catch stdio.h bubble sort. It''s a feature I''m sorry Dave, I''m afraid I can''t do that *.* port bypass ip.</p>
  
  <p>Stdio.h epoch mutex flood wannabee do race condition sql access exception. Bar pragma man pages dereference flush todo highjack while buffer bit nak big-endian syn xss salt for d00dz. Leslie Lamport linux server error hexadecimal snarf tunnel in rm -rf firewall then shell all your base are belong to us.</p>

  <p>Ascii gcc grep int flood kilo linux access mailbomb hash *.* fork semaphore frack else win bar ssh Leslie Lamport. Man pages strlen cache gnu segfault tarball race condition perl packet sniffer root cookie private chown d00dz January 1, 1970. Rsa public crack bit warez throw for void concurrently ip mutex.</p>
  
  <p>Char hello world then man pages ascii long salt while char fatal do boolean tunnel in system else foo packet sniffer float terminal int default. Trojan horse ssh ifdef /dev/null chown cache error protocol afk todo rm -rf mainframe piggyback pwned regex xss warez Starcraft try catch stdio.h bubble sort. It''s a feature I''m sorry Dave, I''m afraid I can''t do that *.* port bypass ip.</p>
  
  <p>Stdio.h epoch mutex flood wannabee do race condition sql access exception. Bar pragma man pages dereference flush todo highjack while buffer bit nak big-endian syn xss salt for d00dz. Leslie Lamport linux server error hexadecimal snarf tunnel in rm -rf firewall then shell all your base are belong to us.</p>

  <p>Ascii gcc grep int flood kilo linux access mailbomb hash *.* fork semaphore frack else win bar ssh Leslie Lamport. Man pages strlen cache gnu segfault tarball race condition perl packet sniffer root cookie private chown d00dz January 1, 1970. Rsa public crack bit warez throw for void concurrently ip mutex.</p>
</main>

Answer 5

Si alguien se encuentra con problemas con el margen superior de su contenedor div que se ignora después de un scrollIntoView, en lugar de desplazar su elemento a la vista, simplemente haga un scrollTop relativo a su contenedor de desplazamiento principal, como tal:

var topOfElementToView= $(''#elementToScroll'').position().top;
$(''#parentScrollingContainer'').scrollTop(topOfElementToView);

Obtuve la respuesta de user113716 en este hilo: ¿Cómo ir a un elemento específico en la página?