Este es un problema poco común que se nos presentó en la versión de Bootstrap 4, al momento de hacer clic en un componente para desplegar el contenido, enseguida nos envía al final de la pantalla.
Nosotros nos dimos cuenta que el error se presenta cuando cualquiera de los componentes tiene una altura muy amplia y eso provoca que se tenga que hacer scroll hacia abajo para poder ver los otros componentes.

Existe varias alternativas para darle solución a esto, aquí te dejamos la que encontramos nosotros y nos pareció la mejor.
$(document).on('shown.bs.collapse', function(event) {
var item_height = event.target.clientHeight,
window_height = window.innerHeight,
offset_top = event.target.offsetTop,
scroll_y = window.scrollY;
if (scroll_y > (window_height - item_height)) {
$('html, body').animate({
scrollTop: ((window_height - item_height) / 2) + offset_top
}, 1000);
}
}
Paso a paso
- Detectamos cada vez que ocurre el evento de collapse
- Definimos las variables con las que vamos hacer nuestros cálculos
item_height: Altura de nuestro componente
window_height: Altura de la venta
offset_top: Distancia de la parte de arriba entre componentes
scroll_y: Valor del scroll en el eje Y - Si el valor del scroll en eje Y es mayor a la altura de nuestra venta menos el valor del componente quiere decir que el scroll ya fue recorrido hacia abajo y si es el caso entonces se presentará el fallo;
- Hacemos que nos retorno hacia arriba procurando que la información del complemento desplazado quede centrada y visible en la ventana para el usuario
Referencias:
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
https://getbootstrap.com/docs/4.0/components/collapse/




Deja un comentario