I want to scroll to the next column once I click the button. And it is working fine if I'm clicking on the first one, using this JS script:
$(".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>But what is happening is, it only works for col-md-6 as siblings. Meaning that it would only work in the first button for each row, the second one does nothing because there is no siblings next. I already searched everywhere on internet, trying to find a way to get the next col-md-6 whether it is a sibling or not so I can scroll to it, but nothing seems to work: index, xpath, anything. Even though it might be a little confusing to figure out why would you want to scroll in columns that are in the same horizontal level, it would make more sense if you imagine them as col-md-12, for example, so it would scroll down on mobile or something like that.
Do not try to do it in a single line. Put some logic into it. Check if there is a next column, and if not go up to the row and check if it has a next row with a column
$(".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>