Quiero desplazarme a la siguiente columna una vez que haga clic en el botón. Y funciona bien si hago clic en el primero, usando este script JS:
$(".btn").click(e => { let element = $(e.target); $([document.documentElement, document.body]).animate({ scrollTop: element.parents('.col-md-6').next().first().offset().top }, 2000); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class="row"> <div class="col-md-6"> <a class="btn">Button 1</a> </div> <div class="col-md-6"> <a class="btn">Button 2</a> </div> </div> <div class="row"> <div class="col-md-6"> <a class="btn">Button 3</a> </div> <div class="col-md-6"> <a class="btn">Button 4</a> </div> </div>Pero lo que sucede es que solo funciona para col-md-6 como hermanos. Lo que significa que solo funcionaría en el primer botón para cada fila, el segundo no hace nada porque no hay hermanos al lado. Ya busqué en todas partes en Internet, tratando de encontrar una manera de obtener el siguiente col-md-6, ya sea un hermano o no , para poder desplazarme hasta él, pero nada parece funcionar: índice, xpath, cualquier cosa. Aunque puede ser un poco confuso averiguar por qué querrías desplazarte en columnas que están en el mismo nivel horizontal, tendría más sentido si las imaginas como col-md-12, por ejemplo, para que se desplace abajo en el móvil o algo así.
No intentes hacerlo en una sola línea. Ponle algo de lógica. Verifique si hay una columna siguiente, y si no, suba a la fila y verifique si tiene una fila siguiente con una columna
$(".btn").click(e => { let element = $(e.target); let nextCol = element.closest('.col-md-6').next(); if (!nextCol.length) { nextCol = element.closest('.row').next().find('.col-md-6').first(); } if (nextCol.length) { $([document.documentElement, document.body]).animate({ scrollTop: nextCol.offset().top }, 2000); } }); /* this is just to show case the animation in the demo */ .col-md-6 { padding: 5em; margin: 5em 1em; border: 2px solid black; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="row"> <div class="col-md-6"> <a class="btn">Button 1</a> </div> <div class="col-md-6"> <a class="btn">Button 2</a> </div> </div> <div class="row"> <div class="col-md-6"> <a class="btn">Button 3</a> </div> <div class="col-md-6"> <a class="btn">Button 4</a> </div> </div>