Open nav-tab-content then scroll down in Bootstrap 4

Hello I have two functions which are working. I understand a little about how programming works but I dont have background in javascript or jquery (idk).

This function opens a nav tab-content:

<script> function homeTab() {
    $('[href="#nav-home"]').tab('show');
     } 
</script>

This function auto scrolls to the shopping div at the bottom:

<script>
    $('#nav-shop-tab').click(function () {
         var sectionTo = $(this).attr('href');
          $('html, body').animate({
              scrollTop: $(sectionTo).offset().top
          }, 1500);
       });
</script>

Functions above are all working

Home and Shop are in the same page. Shop is in bottom
enter image description here

This is the about tab

About tab

What I want is how can I merge these two functions? so that when I click a button(SHOP at GCO) it will first open the "home" tab then scroll down to the shopping div?

Is it possible? I’m open to other solutions as well so that I can learn more. Thanks

1 thought on “Open nav-tab-content then scroll down in Bootstrap 4”

Leave a Comment