Estoy usando este panel de Bootstrap:
<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>Y agregué este script para redirigirme a una pestaña específica en la recarga de la página:
// 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'); }Ahora esto funciona bien y redirige correctamente a una pestaña específica cuando voy a una URL como esta:
https://sitename.com/page#tabs-2 Pero necesito cargar la página con 100px superior.
Quiero decir que tengo que desplazarme hacia arriba en la página 100px , cuando los usuarios quieren cargar un panel de pestañas.
Entonces, ¿cómo puedo hacer eso?
Puede usar este código que lo redirige al panel Bootstrap y también mover -100 px verticalmente hacia arriba:
$(document).ready(function(){ if(window.location.hash != "") { $('a[href="' + window.location.hash + '"]').click(); window.scrollBy(0, -100); // 0 pixels horizontal } });