Bootstrap - link that scroll and open specific tab

Question

I have link on top of the page:

<a data-toggle="tab" href="https://mysite.pl/#tabs3-k_tab3" class="blur-button">Zobacz promocje</a>

I want this link to scroll to a specific section on the same page (section with tabs - this is landing page) - and open specific tab (by id - I think) - without reloading the page. I have four tabs with images as links.

    <div class="container-fluid">
        <div class="row tabcont">
            <ul class="nav nav-tabs pt-3 mt-5" role="tablist">

<li class="nav-item mbr-fonts-style" ><a class="nav-link show display-7" id="arabica" role="tab" data-toggle="tab" href="#tabs3-n_tab0" aria-selected="true" >
<img src="assets/images/image.png" />
</a></li>

<li class="nav-item mbr-fonts-style" ><a class="nav-link id="espresso" show display-7" role="tab" data-toggle="tab" href="#tabs3-n_tab1" aria-selected="true">
<img src="assets/images/image.png"/>
</a></li>

<li class="nav-item mbr-fonts-style" ><a class="nav-link show display-7" id="crema" role="tab" data-toggle="tab" href="#tabs3-n_tab2" aria-selected="true">
<img src="assets/images/image.png"/>
</a></li>

<li class="nav-item mbr-fonts-style" ><a class="nav-link show display-7" id="organica" role="tab" data-toggle="tab" href="#tabs3-n_tab3" aria-selected="true">
<img src="assets/images/image.png"/>
</a></li>
</ul>
</div>
</div>
<div class="row px-1">
            <div class="tab-content">
                <div id="tabs3-n_tab0" class="tab-pane in mbr-table active" role="tabpanel">
                    <div class="row tab-content-row">
                        <div>
                            txt
                        </div>          
                    </div>
                </div>

                <div id="tabs3-n_tab1" class="tab-pane  mbr-table" role="tabpanel">
                    <div class="row tab-content-row">
                        <div>
                            txt                          
                        </div>
                    </div>
                </div>
                <div id="tabs3-n_tab2" class="tab-pane  mbr-table" role="tabpanel">
                    <div class="row tab-content-row">
                        <div>
                            txt
                        </div>  
                    </div>
                </div>

                <div id="tabs3-n_tab3" class="tab-pane  mbr-table" role="tabpanel">
                    <div class="row tab-content-row">
                        <div>
                           txt
                        </div>
                    </div>
                </div>


            </div>
        </div>

and script that show id in url:

$(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    history.pushState({}, '', e.target.hash);
  });

  var hash = document.location.hash;
  var prefix = "tab_";
  if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
  }
});

Now links https://mysite.pl/#tabs3-k_tab3 opens up good tab, but I have to reload the page. And page doesn't scroll to section with tabs.

How can I make this to work?

Answer 1

As far as I know, you can do that without coding it manually. In HTML Website Builder mobirise you can set the link to a certain block. Click on the item of the menu, then add a link to the item. After that choose block on the page.

Answer 2

In the just new location link /page/page.html, add #id_of_location to the end of it so its like this /page/page.html#id_of_location. the page will move the screen so that the HTML element of <div id='id_of_location'> is at the top of screen.

w# example of this.

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_bookmark

Answer 3

So I've change the code of a link to

<a href="#tabs3-k_tab3" onclick="location.hash='tabs3-k_tab3'; location.reload();" class="blur-button">Zobacz promocje</a>

And now it opens specific tab - this is great. I only need this to scroll down to all tabs on click too. Someone have an idea how to achive this?