¿Cómo deshabilitar el "salto" de anclaje al cargar una página?

Creo que esto puede no ser posible, intentaré explicarlo lo mejor que pueda. Tengo una página que contiene pestañas (con jquery), controladas por lo siguiente:

Estoy usando este código, proporcionado por otro usuario de una pregunta anterior.

<script type="text/javascript">
    $(function() {

     $('html, body').animate({scrollTop:0}); // this is my "fix"

        var tabContent = $(".tab_content");
        var tabs = $("#menu li");
        var hash = window.location.hash;
     tabContent.not(hash).hide();
        if(hash=="") {
      $('#tab1').fadeIn();
     }
        tabs.find('[href=' + hash + ']').parent().addClass('active');

        tabs.click(function() {
            $(this).addClass('active').siblings().removeClass('active');
            tabContent.hide();
            var activeTab = $(this).find("a").attr("href");

            $(activeTab).fadeIn();
           return false;
        });

    });
</script>

este código funciona muy bien cuando visito la página de "pestañas" directamente.

sin embargo, necesito vincular a pestañas individuales de otras páginas, por lo que para hacer esto, el código obtiene y window.location.hashluego muestra la pestaña apropiada.

la página no "salta" al ancla debido a "devolver falso".

Sin embargo, este evento solo se activa en un evento de clic. por lo tanto, si visito mis "pestañas" desde cualquier otra página, se activa el efecto "salto". Para combatir esto, me desplazo automáticamente a la parte superior de la página, pero preferiría que esto no sucediera.

¿Hay alguna forma de simular el "retorno falso" cuando se carga la página, evitando que se produzca el "salto" del ancla?

Espero que esté bastante claro.

Gracias

¿Tu solución no funciona? No estoy seguro de haber entendido la pregunta correctamente. ¿Tiene una página de demostración? Tu podrías intentar:

if (location.hash) {
  setTimeout(function() {

    window.scrollTo(0, 0);
  }, 1);
}

Editar: probado y funciona en Firefox, IE y Chrome en Windows.
Edición 2: moverse setTimeout()dentro del ifbloque, apoyos @vsync.

Vea mi respuesta aquí: Respuesta de Stackoverflow

El truco consiste en eliminar el hashtag lo antes posible y almacenar su valor para su propio uso:

Es importante que no ponga esa parte del código en las funciones $ () o $ (ventana) .load (), ya que sería demasiado tarde y el navegador ya se movió a la etiqueta.

// store the hash (DON'T put this code inside the $() function, it has to be executed 
// right away before the browser can start scrolling!
var target = window.location.hash,
    target = target.replace('#', '');

// delete hash so the page won't scroll to it
window.location.hash = "";

// now whenever you are ready do whatever you want
// (in this case I use jQuery to scroll to the tag after the page has loaded)
$(window).on('load', function() {
    if (target) {
        $('html, body').animate({
            scrollTop: $("#" + target).offset().top
        }, 700, 'swing', function () {});
    }
});

Hay otras formas de rastrear en qué pestaña estás; quizás estableciendo una cookie, o un valor en un campo oculto, etc., etc.

Yo diría que si no desea que la página se cargue, será mejor que use una de estas otras opciones en lugar del hash, porque la razón principal para usar el hash en lugar de ellas es permitir exactamente lo que desea quieres bloquear.

Otro punto: la página no saltará si sus enlaces hash no coinciden con los nombres de las etiquetas en el documento, por lo que quizás, si desea seguir usando el hash, podría manipular el contenido para que las etiquetas tengan un nombre diferente. Si usa un prefijo consistente, aún podrá usar Javascript para saltar entre ellos.

Espero que ayude.

Usé la solución de dave1010, pero estaba un poco nervioso cuando la puse dentro de la función $ (). Ready. Entonces hice esto: (no dentro del $ (). Listo)

    if (location.hash) {               // do the test straight away
        window.scrollTo(0, 0);         // execute it straight away
        setTimeout(function() {
            window.scrollTo(0, 0);     // run it a bit later also for browser compatibility
        }, 1);
    }

1. El navegador salta a <element id="abc" />si hay http://site.com/#abc hash en la dirección y el elemento con id = "abc" es visible. Por lo tanto, sólo debe ocultar el elemento por defecto: <element id="anchor" style="display: none" />. Si no hay un elemento visible con id = hash en la página, el navegador no saltará.

2. Cree un script que verifique el hash en la URL y luego busque y muestre el elemento apropiado (que está oculto por defecto).

3. Deshabilite el comportamiento predeterminado de "enlace tipo hash" vinculando un evento onclick a un enlace y especifique return false;como resultado del evento onclick.

Cuando implementé pestañas, escribí algo así:

    <script>
    $(function () {         
        if (location.hash != "") {
            selectPersonalTab(location.hash);
        }
        else {
            selectPersonalTab("#cards");
        }
    });

    function selectPersonalTab(hash) {
        $("#personal li").removeClass("active");
        $("a[href$=" + hash + "]").closest("li").addClass("active");
        $("#personaldata > div").hide();
        location.hash = hash;
        $(hash).show();
    }

    $("#personal li a").click(function (e) {
        var t = e.target;
        if (t.href.indexOf("#") != -1) {
            var hash = t.href.substr(t.href.indexOf("#"));
            selectPersonalTab(hash);
            return false;
        }
    });
</script>

Ninguna de las respuestas no funciona lo suficientemente bien para mí, veo que la página salta para anclar y luego para arriba para algunas soluciones, algunas respuestas no funcionan en absoluto, puede que las cosas hayan cambiado durante años. Espero que mi función ayude a alguien.

/**
 * Prevent automatic scrolling of page to anchor by browser after loading of page.
 * Do not call this function in $(...) or $(window).on('load', ...),
 * it should be called earlier, as soon as possible.
 */
function preventAnchorScroll() {
    var scrollToTop = function () {
        $(window).scrollTop(0);
    };
    if (window.location.hash) {
        // handler is executed at most once
        $(window).one('scroll', scrollToTop);
    }

    // make sure to release scroll 1 second after document readiness
    // to avoid negative UX
    $(function () {
        setTimeout(
            function () {
                $(window).off('scroll', scrollToTop);
            },
            1000
        );
    });
}

CSS sucio solo se corrige para permanecer desplazado hacia arriba cada vez que se usa el ancla (no es útil si aún desea usar anclajes para saltos de desplazamiento, muy útil para enlaces profundos):

.elementsWithAnchorIds::before {
   content: "";
   display: block;
   height: 9999px;
   margin-top: -9999px; //higher thin page height
}

Si bien la respuesta aceptada funciona bien, descubrí que a veces, especialmente en páginas que contienen imágenes grandes, la barra de desplazamiento saltará salvajemente usando

 window.scrollTo(0, 0);

Lo que puede distraer bastante al usuario.

La solución con la que me decidí al final es bastante simple, y es usar una identificación diferente en el objetivo a la que se usó en location.hash

P.ej:

Aquí está el enlace en alguna otra página.

<a href="/page/with/tabs#tab2">Some info found in tab2 on tabs page</a>

Entonces, por supuesto, si hay un elemento con un ID de tab2 en la página de pestañas, la ventana saltará a él al cargar.

Entonces puede agregar algo a la identificación para evitarlo:

<div id="tab2-noScroll">tab2 content</div>

Y a continuación, puede añadir "-noScroll"a location.hashla javascript:

<script type="text/javascript">
    $(function() {

        var tabContent = $(".tab_content");
        var tabs = $("#menu li");
        var hash = window.location.hash;


     tabContent.not(hash + '-noScroll').hide();                           
        if(hash=="") {       //^ here
      $('#tab1-noScroll').fadeIn();
     }
        tabs.find('[href=' + hash + ']').parent().addClass('active');

        tabs.click(function() {
            $(this).addClass('active').siblings().removeClass('active');
            tabContent.hide();
            var activeTab = $(this).find("a").attr("href") + '-noScroll'; 
                                                               //^ and here

            $(activeTab).fadeIn();
           return false;
        });

    });
</script>

En mi caso, debido al uso de un enlace de anclaje para la ventana emergente CSS, lo he usado de esta manera:

Simplemente guarde el pageYOffset primero al hacer clic y luego configure ScrollTop en eso:

$(document).on('click','yourtarget',function(){
        var st=window.pageYOffset;
        $('html, body').animate({
                'scrollTop' : st
            });
});

Creo que encontré una forma de usar las pestañas de la interfaz de usuario sin rehacer la funcionalidad. Hasta ahora no he encontrado ningún problema.

    $( ".tabs" ).tabs();
    $( ".tabs" ).not(".noHash").bind("tabsshow", function(event, ui) { 
        window.location.hash = "tab_"+ui.tab.hash.replace(/#/,"");
        return false;
    });

    var selectedTabHash = window.location.hash.replace(/tab_/,"");
    var index = $( ".tabs li a" ).index($(".tabs li a[href='"+selectedTabHash+"']"));
    $( ".tabs" ).not(".noHash").tabs('select', index);

Todo dentro de un evento listo. Antepone "tab_" para el hash, pero funciona tanto cuando se hace clic como cuando se carga la página con hash.

Esto funcionará con bootstrap v3

$(document).ready(function() {
  if ($('.nav-tabs').length) {
    var hash = window.location.hash;
    var hashEl = $('ul.nav a[href="' + hash + '"]');
    hash && hashEl.tab('show');

    $('.nav-tabs a').click(function(e) {
      e.preventDefault();
      $(this).tab('show');
      window.location.hash = this.hash;
    });

    // Change tab on hashchange
    window.addEventListener('hashchange', function() {
      var changedHash = window.location.hash;
      changedHash && $('ul.nav a[href="' + changedHash + '"]').tab('show');
    }, false);
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
</div>
</div>

Otro enfoque

Intente verificar si la página se ha desplazado y solo luego restablezca la posición:

var scrolled = false;

$(window).scroll(function(){
  scrolled = true;
});

if ( window.location.hash && scrolled ) {
  $(window).scrollTop( 0 );
}

Heres a demo

No tuve mucho éxito con los setTimeoutmétodos anteriores en Firefox.

En lugar de setTimeout, he usado una función de carga:

window.onload = function () {
    if (location.hash) {
        window.scrollTo(0, 0);
    }
};

Lamentablemente, sigue teniendo muchos fallos.

No he tenido ningún éxito constante con estas soluciones.

Aparentemente debido al hecho de que el salto ocurre antes de Javascript => referencia ( http://forum.jquery.com/topic/preventing-anchor-jump )

Mi solución es colocar todos los anclajes en la parte superior de forma predeterminada con CSS.

.scroll-target{position:fixed;top:0;left:0;}

Luego use jquery para desplazarse al padre del ancla de destino, o un hermano (tal vez una etiqueta em vacía)

<a class="scroll-target" name="section3"></a><em>&nbsp</em>

Ejemplo de jquery para desplazarse cuando la URL se ingresa con hash
(la página no debe estar ya cargada en la ventana / pestaña, esto cubre enlaces de otras fuentes / externas)

setTimeout(function() {
    if (window.location.hash) {               
        var hash = window.location.hash.substr(1);   
        var scrollPos = $('.scroll-target[name="'+hash+'"]').siblings('em').offset().top; 
        $("html, body").animate({ scrollTop: scrollPos }, 1000);    
    }
}, 1);

También querrá evitar los clics de anclaje predeterminados mientras está en la página y luego desplazarse a sus objetivos

<a class="scroll-to" href="#section3">section three</a>

y jquery

$('a.scroll-to').click(function(){
    var target = $(this).attr('href').substr(1);
    var scrollPos = $('.scroll-target[name="'+target+'"]').siblings('em').offset().top; 
    $("html, body").animate({ scrollTop: scrollPos }, 1000);
    return false;
});

Lo bueno de este método son los destinos de la etiqueta de anclaje, que permanecen estructuralmente al lado del contenido relevante, aunque su posición CSS está en la parte superior.

Esto debería significar que los rastreadores de los motores de búsqueda no tendrán ningún problema.

Saludos, espero que esto ayude a
Gray

Intente esto para evitar que el cliente realice cualquier tipo de desplazamiento vertical en hashchanged (dentro de su controlador de eventos):

var sct = document.body.scrollTop;
document.location.hash = '#next'; // or other manipulation
document.body.scrollTop = sct;

(redibujar navegador)

Resolví mi promlem haciendo esto:

// navbar height 
var navHeigth = $('nav.navbar').height();    

// Scroll to anchor function
var scrollToAnchor = function(hash) {
  // If got a hash
  if (hash) {
    // Scroll to the top (prevention for Chrome)
    window.scrollTo(0, 0);
    // Anchor element
    var term = $(hash);

    // If element with hash id is defined
    if (term) {

      // Get top offset, including header height
      var scrollto = term.offset().top - navHeigth;

      // Capture id value
      var id = term.attr('id');
      // Capture name value
      var name = term.attr('name');

      // Remove attributes for FF scroll prevention
      term.removeAttr('id').removeAttr('name');
      // Scroll to element
      $('html, body').animate({scrollTop:scrollto}, 0);

      // Returning id and name after .5sec for the next scroll
      setTimeout(function() {
        term.attr('id', id).attr('name', name);
      }, 500);
    }
  }
};

// if we are opening the page by url
if (location.hash) {
  scrollToAnchor(location.hash);
}

// preventing default click on links with an anchor
$('a[href*="#"]').click(function(e) {
  e.preventDefault();
  // hash value
  var hash = this.href.substr(this.href.indexOf("#"));
  scrollToAnchor(hash);
});`