Bootstrap tab scroll down to corresponding tab-content id

HTML & CSS
,
1

im using bootstrap tab its fine on desktop but in mobile version when click on tab-title user have to scroll down manually to tab-content for viewing tab content.

Capture

so when user click on tab-title in mobile it should scroll down to its corresponding tab-content, so that user havent to scroll down manually

Tab -title

<div class="nav w-100 nav-pills me-4">
  <button class="nav-link w-100 d-flex align-items-center text-start p-3 mb-2 active" data-bs-toggle="pill" data-bs-target="#tab-pane-1" type="button">
      <h5 class="m-0">Single Story</h5>
  </button>
  <button class="nav-link w-100 d-flex align-items-center text-start p-3 mb-2" data-bs-toggle="pill" data-bs-target="#tab-pane-2" type="button">
      <h5 class="m-0">Double Story / Town House / Duplex</h5>
  </button>
  <button class="nav-link w-100 d-flex align-items-center text-start p-3 mb-2" data-bs-toggle="pill" data-bs-target="#tab-pane-3" type="button">
      <h5 class="m-0">German Roaches</h5>
  </button>
  <button class="nav-link w-100 d-flex align-items-center text-start p-3 mb-2" data-bs-toggle="pill" data-bs-target="#tab-pane-4" type="button">
      <h5 class="m-0">Rodent (Mice/Rats)</h5>
  </button>
  <button class="nav-link w-100 d-flex align-items-center text-start p-3 mb-2" data-bs-toggle="pill" data-bs-target="#tab-pane-5" type="button">
      <h5 class="m-0">Ants</h5>
  </button>
</div>

Tab-content

<div class="tab-content w-100">
  <div class="tab-pane fade show active" id="tab-pane-1">
      <div class="row g-4">
          <div class="col-md-12 mt-3">
              <div class="cepage mt-3">
                  <h3 class="mb-3">Lorem ipsum dolor, sit amet consectetur  elit </h3>
              </div>
          </div>
      </div>
  </div>

  <div class="tab-pane fade" id="tab-pane-2">
      <div class="row g-4">
          <div class="col-md-12 mt-3">
              <div class="cepage mt-3">
                  <h3 class="mb-3">Lorem ipsum dolor, sit amet consectetur  elit </h3>
              </div>
          </div>
      </div>
  </div>

  <div class="tab-pane fade" id="tab-pane-3">
      <div class="row g-4">
          <div class="col-md-12 mt-3">
              <div class="cepage mt-3">
                  <h3 class="mb-3">Lorem ipsum dolor, sit amet consectetur  elit </h3>
              </div>
          </div>
      </div>
  </div>

  <div class="tab-pane fade" id="tab-pane-4">
      <div class="row g-4">
          <div class="col-md-12 mt-3">
              <div class="cepage mt-3">
                  <h3 class="mb-3">Lorem ipsum dolor, sit amet consectetur  elit </h3>
                   
              </div>
          </div>
      </div>
  </div>

  <div class="tab-pane fade" id="tab-pane-5">
      <div class="row g-4">
          <div class="col-md-12 mt-3">
              <div class="cepage mt-3">
                  <h3 class="mb-3">Lorem ipsum dolor, sit amet consectetur  elit </h3>
              </div>
          </div>
      </div>
  </div>

</div>
2

I believe you can use a script like this to scroll to the content.

$(".nav-link").on("shown.bs.tab", function (e) {
  var href = $(this).attr("data-bs-target");
  $("html, body").animate(
    {
      scrollTop: $(href).offset().top
    },
    "slow"
  );
});

Note that it is invalid to nest a heading tag inside a button element. Only phrasing content (such as a span) is allowed inside a button. No block element tags are allowed. You can of course style the span to look like a heading or exactly as you require.

1 Like
3

Okay, let’s use JavaScript for your automation.
This solution is using jQuery and let me hope you’re using Bootstrap v4 and below as they use jQuery.

If you have jQuery loaded

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

add the following code

<script>
$(document).ready(function() {
    $('.nav-pills [data-bs-toggle="pill"]').on('shown.bs.tab', function (e) {
        if (window.innerWidth <= 768) { // For mobile screens
            var targetContentId = $(e.target).attr('data-bs-target');
            var targetOffset = $(targetContentId).offset().top;
            $('html, body').animate({
                scrollTop: targetOffset
            }, 500); // 500ms animation speed
        }
    });
});
</script>

The script listens for the shown.bs.tab event which is triggered by Bootstrap when a new tab content is shown. When the tab content is shown, it calculates the position of the tab content and scrolls to it using a smooth animation.
Also, the condition if (window.innerWidth <= 768) ensures that the automatic scrolling only happens on screens smaller than or equal to 768 pixels in width (typically mobile devices), you can adjust this value as needed based on the breakpoint you consider to be “mobile”.

I have not tested this code, let me hope it works for your solution.

1 Like
4

im using boostrap-5 but i have tried with bootstrap 4 too but it doesnt work, it doesnt scroll dwon to coressponding tab-content id when click on tab-title

5

Did you try the script I gave you ? It was working for me.

Here’s the script with your html in a bootstrap5 page to show it working.

Post a codepen demo if not or at least a link to the non working page.

1 Like
6

Why not?

How did you manage to write all that code without testing ?

I’ve tested it for you and it will work but not keen on the window.innerWidth <= 768) check as that only applies on load and not if someone resizes (such as a tablet to/from landscape etc or even a desktop to a small screen).

1 Like
7

Also, why less than or equal to?

1 Like
8

Please, update the window size as you want. And if I remember very well, was this issue not to automate the scroll?

And not to optimize the content for mobile! wright? I think that’s what the given code does.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.