Estoy tratando de crear una redirección de página a una sección en particular, es decir, quiero ir a un div de anclaje en particular en una página sin comportamiento de desplazamiento. Sin embargo, tengo una cadena de consulta en la URL para la paginación, por lo que el método #id falló. Intenté "scrollIntoView()" pero contiene el comportamiento de desplazamiento de página, que no es deseado. ¿Puedo preguntar si hay alguna solución alternativa a este problema?
Estoy usando Vue para el frontend y Codeigniter para el backend. Aquí está mi código:
mounted() { // anchorPageToProductList if (this.isOnQuery) { console.log('isOnQuery'); this.scrollToProductList(); } else { console.log('isNotOnQuery'); } }, methods: { scrollToProductList(){ window.addEventListener('DOMContentLoaded', () => { // scroll animation document.getElementById('product-list-anchor').scrollIntoView(true); }); },Ejemplo de mi caso de URL:
http://www.example.com/Product/list?search=&sort=3&type=-1&event%5B%5D=11&pagination=1¡¡Gracias!!
Intenté desactivar el comportamiento de desplazamiento, permitir que la página salte a la sección deseada y luego restablecer el comportamiento de desplazamiento suave. Así que ahora funciona sin el comportamiento de desplazamiento. Gracias por todos los comentarios:)
Mi código:
scrollToProductList(){ window.addEventListener('DOMContentLoaded', () => { // select the whole html & disable smooth-scroll behavior in css let htmlElement = document.querySelector('html'); htmlElement.style.scrollBehavior = 'auto'; // go to the anchor point document.getElementById('product-list-anchor').scrollIntoView(true); // enable smooth-scroll behavior again htmlElement.style.scrollBehavior = 'smooth'; }); }