Como desativar o “salto” da âncora ao carregar uma página?

Acho que isso pode não ser possível, vou tentar explicar da melhor maneira que puder. Eu tenho uma página contendo guias (jquery powered), controlada pelo seguinte:

Estou usando este código, fornecido por outro usuário em uma pergunta 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>

esse código funciona muito bem quando eu visito a página "guias" diretamente.

no entanto, preciso criar um link para guias individuais de outras páginas - então, para fazer isso, o código obtém o window.location.hashe mostra a guia apropriada.

a página não "pula" para a âncora por causa do "retorno falso".

este evento só é acionado em um evento de clique. portanto, se eu visitar minhas "guias" em qualquer outra página, o efeito de "pulo" é ativado. Para combater isso, vou automaticamente até o topo da página, mas prefiro que isso não aconteça.

existe alguma maneira de simular o "retorno falso" quando a página carrega, evitando que o "salto" da âncora ocorra.

espero que isso esteja claro o suficiente.

obrigado

Sua correção não funciona? Não tenho certeza se entendi a pergunta corretamente - você tem uma página de demonstração? Você poderia tentar:

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

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

Editar: testado e funciona no Firefox, IE e Chrome no Windows.
Editar 2: mover setTimeout()dentro do ifbloco, props @vsync.

Veja minha resposta aqui: Resposta Stackoverflow

O truque é apenas remover a hashtag o mais rápido possível e armazenar seu valor para seu próprio uso:

É importante que você não coloque essa parte do código nas funções $ () ou $ (window) .load (), pois seria tarde demais e o navegador já teria passado para a tag.

// 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 () {});
    }
});

Existem outras maneiras de rastrear em qual guia você está; talvez definindo um cookie ou um valor em um campo oculto, etc. etc.

Eu diria que se você não quiser que a página salte no carregamento, seria melhor usar uma dessas outras opções em vez do hash, porque a principal razão para usar o hash em vez deles é permitir exatamente o que você está querendo bloquear.

Outro ponto - a página não saltará se seus links hash não corresponderem aos nomes das tags no documento, então talvez se você quiser continuar usando o hash, você pode manipular o conteúdo para que as tags tenham nomes diferentes. Se você usar um prefixo consistente, ainda poderá usar Javascript para alternar entre eles.

Espero que ajude.

Usei a solução dave1010, mas ficou um pouco assustada quando a coloquei dentro da função $ (). Ready. Então eu fiz isso: (não dentro de $ (). Pronto)

    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. O navegador pula para <element id="abc" />se houver http://site.com/#abc hash no endereço e o elemento com id = "abc" estiver visível. Então, você só deve ocultar o elemento por padrão: <element id="anchor" style="display: none" />. Se não houver nenhum elemento visível com id = hash na página, o navegador não saltará.

2. Crie um script que verifique o hash no url e, em seguida, encontre e mostre o elemento apropriado (que está oculto por padrão).

3. Desative o comportamento padrão de "link semelhante a hash" vinculando um evento onclick a um link e especifique return false;como resultado do evento onclick.

Quando implementei guias, escrevi algo assim:

    <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>

Nenhuma das respostas não funciona bem para mim, vejo a página pulando para a âncora e depois para o topo para algumas soluções, algumas respostas não funcionam de todo, podem ser coisas mudadas por anos. Espero que minha função ajude alguém.

/**
 * 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 sujo apenas corrige para permanecer rolado para cima toda vez que a âncora é usada (não é útil se você ainda deseja usar âncoras para saltos de rolagem, muito útil para links diretos):

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

Embora a resposta aceita funcione bem, eu descobri que às vezes, especialmente em páginas que contêm imagens grandes que a barra de rolagem pula rapidamente usando

 window.scrollTo(0, 0);

O que pode ser bastante perturbador para o usuário.

A solução que decidi no final é realmente muito simples, e isso é usar um ID diferente no alvo para aquele usado em location.hash

Por exemplo:

Aqui está o link em alguma outra página

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

Então, é claro, se houver um elemento com um ID de tab2 na página de guias, a janela saltará para ele no carregamento.

Portanto, você pode anexar algo ao ID para evitá-lo:

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

E então você pode acrescentar "-noScroll"a location.hashno 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>

No meu caso, devido ao uso de link âncora para CSS pop-up, usei desta forma:

Basta salvar o pageYOffset primeiro ao clicar e, em seguida, definir o ScrollTop para:

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

Acho que encontrei uma maneira de usar as guias da interface do usuário sem refazer a funcionalidade. Até agora não encontrei nenhum 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);

Tudo dentro de um evento pronto. Ele precede "tab_" para o hash, mas funciona tanto quando clicado quanto na página carregada com hash.

Isso funcionará com 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>

Outra abordagem

Experimente verificar se a página foi rolada e só então redefina a posição:

var scrolled = false;

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

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

Heres a demo

Não tive muito sucesso com os setTimeoutmétodos acima no Firefox.

Em vez de setTimeout, usei uma função onload:

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

Ainda é muito problemático, infelizmente.

Não tive nenhum sucesso consistente com essas soluções.

Aparentemente devido ao fato de que o salto acontece antes de Javascript => referência ( http://forum.jquery.com/topic/preventing-anchor-jump )

Minha solução é posicionar todas as âncoras no topo por padrão com CSS.

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

Em seguida, use jquery para rolar até o pai da âncora de destino ou um irmão (talvez uma tag em vazia)

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

jquery exemplo para rolar para quando o URL é inserido com hash
(a página não deve estar carregada na janela / guia, isso cobre links de outras fontes 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);

Além disso, você deseja evitar o padrão para cliques de âncora enquanto na página e, em seguida, rolar para seus destinos

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

e 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;
});

A vantagem desse método é que os alvos da tag âncora permanecem estruturalmente ao lado do conteúdo relevante, embora sua posição CSS esteja no topo.

Isso deve significar que os rastreadores de mecanismos de pesquisa não terão problemas.

Saúde, espero que isso ajude
Gray

Tente isso para evitar que o cliente faça qualquer tipo de rolagem vertical em hashchanged (dentro de seu manipulador de eventos):

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

(redesenho do navegador)

Resolvi meu problema fazendo isto:

// 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);
});`