Estoy usando Boostrap y JQuery en una página web ASP.NET para una operación de tipo acordeón. Quiero un botón para abrir una tarjeta específica y luego desplazarla suavemente hasta la parte superior de la ventana del navegador. Funciona bastante bien en mi entorno de desarrollo y usando F12 con todos los dispositivos posibles, pero cuando llega al mundo real, su funcionamiento es errático e impreciso y en iOS es ridículo.

Me resulta difícil solucionar problemas porque funciona en mi entorno de desarrollo. He usado Console.Log y veo valores muy diferentes en el mundo real. El siguiente código se encuentra en la parte inferior de mi etiqueta de cuerpo .aspx.

 $(document).ready(function () { $("#getting").click(function () { $("#collapse5").collapse("show"); $('html, body').animate({ scrollTop: $("#collapse5").offset().top }, 1000); }); $("#begin").click(function () { //$(window).scrollTo(document.getElementById('collapseFive'), 1000); console.log("before " + $("#collapseFive").offset().top); window.scrollTo({ top: $("#collapseFive").offset().top, left: 0, behavior: 'smooth' }); $("#collapseFive").collapse("show"); console.log("After " + $("#collapseFive").offset().top); }); });

Donde colapso5 es el ID de mi tarjeta de acordeón y obtención es el ID de mi botón. He probado muchas funciones de desplazamiento diferentes y he intentado mover el colapso delante o detrás del código de desplazamiento. Arriba hay algunos que probé. Siento que es una especie de sincronización y que mi servidor de desarrollo es amable o demasiado lento para tener el problema.

También diría que no siempre funciona bien en el entorno de desarrollo, ya que en algunas opciones de desplazamiento, las cosas hacia la parte superior de la página a veces no se desplazan hasta la parte superior.

Realmente solo quiero que coloque la parte superior de la tarjeta en la parte superior del navegador y siento que debería ser mucho más fácil.

También necesito habilitar la entrada en tarjetas abiertas y deshabilitar la entrada en tarjetas cerradas. En caso de que esta sea la causa, aquí está el código que estoy usando para habilitar la entrada en tarjetas abiertas y también hay un código similar para deshabilitar al ocultar. Esto está funcionando bien para solucionar problemas con los campos obligatorios y el requisito de formulario único de ASP.NET, pero tal vez haya un efecto de cascada o algo así.

 $("#collapse5").on("show.bs.collapse", function (e) { $(this).find('input').prop('disabled', false); $(this).find('button').prop('disabled', false); });

Estoy usando Visual Studio 2015, JQuery 3.6, con boostrap 4.3.1,

Gracias, n0npr0phet