I'm using this Bootstrap panel:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">First Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Second Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Third Panel</a>
</li>
</ul><!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="tabs-1" role="tabpanel">
<p>First Panel</p>
</div>
<div class="tab-pane" id="tabs-2" role="tabpanel">
<p>Second Panel</p>
</div>
<div class="tab-pane" id="tabs-3" role="tabpanel">
<p>Third Panel</p>
</div>
</div>
And I added this script to redirects me to a specific tab on page reload:
// Javascript to enable link to tab
var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash
if (hash) {
$('.nav-tabs a[href="#' + hash + '"]').tab('show');
}
Now this works fine and properly redirects to a specific tab when I go to a URL like this:
https://sitename.com/page#tabs-2
But I need to load the page with 100px upper.
I mean I have to scroll up the page 100px, when users wants to load a tab-pane.
So how can I do that?
You can use this code which redirects you to Bootstrap panel and also move -100px vertically to the up:
$(document).ready(function(){
if(window.location.hash != "") {
$('a[href="' + window.location.hash + '"]').click();
window.scrollBy(0, -100); // 0 pixels horizontal
}
});