0

Tengo este div:

<div style="overflow:scroll;height:90vh">
<div style="height:100px;" id-div="div1">hola soy div 1</div>
<div style="height:100px;" id-div="div2">hola soy div 2</div>
<div style="height:100px;" id-div="div3">hola soy div 3</div>
<div style="height:100px;" id-div="div4">hola soy div 4</div>
<div style="height:100px;" id-div="div5">hola soy div 5</div>
</div>

lo que deseo es que al dar click en

<button data-scroll="div3">Ir al div 3</button>

mi contenedor me aparezca con el scroll en div3.

NOTA IMPORTANTE:

  • Esto lo deseo porque tengo enlaces con 3 contenidos, y esos contenidos estan montados en un modal, entonces cuando abro contenido 1 me tiene que desplazar hacia contenido 1.
  • los contenidos se encuentran en un modal hide que contienen un div con overflow.

2 respuestas 2

2

Podrías hacer múltiples query selector a los elementos que necesitas, por ejemplo en primer lugar obtienes el valor del aributo data-scroll y con esto puedes hacer otra query donde busques un elemento cuyo attributo id-div sea igual al valor que se obtuvo anteriormente, si el elemento existe ejecutas el método scrollIntoView que permite que el elemento se haga visible dentro de una caja de scroll, puedes añadir más configuraciones a este dependiendo de como esperas que se comporte el movimiento del scroll

function scrollToElement(event) {
  const scrollTarget = event.target.getAttribute('data-scroll');
  const scrollElement = document.querySelector(`[id-div="${scrollTarget}"]`);

  scrollElement.scrollIntoView({
    behavior: 'smooth'
  });
}
<div style="overflow: scroll; height: 200px">
  <div style="height: 100px" id-div="div1">hola soy div 1</div>
  <div style="height: 100px" id-div="div2">hola soy div 2</div>
  <div style="height: 100px" id-div="div3">hola soy div 3</div>
  <div style="height: 100px" id-div="div4">hola soy div 4</div>
  <div style="height: 100px" id-div="div5">hola soy div 5</div>
</div>

<button data-scroll="div3" onclick="scrollToElement(event)">Ir al div 3</button>

0

Para lograr un scroll suave a un destino interno (en la misma página), solo basta con un estilo en CSS, un href y un id en el HTML5.

El CSS debe ser así:

html {
 scroll-behavior: smooth;
}

El enlace debe contener un # con el destino:

<a href="#div-1">
 <button>Ir al div 1</button>
</a>

El destino debe tener una id igual a su enlace #:

<div style="height:100px;" id-div="div1">hola soy div 1</div>

Lo que hace scroll-behavior: smooth; en html, es un scroll suave de un enlace a un destino interno: id.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.