How to suppress navigation to #anchor specified in URL?

Question

css

The page has anchors . They are used both when navigating inside the page, and for external transitions immediately to the right place. Problem: When you go to a URL with the specified anchor, the page immediately (onready) rewinds to the anchor. However, the layout of the page itself is performed by a script: the heights, widths, and positions of the elements are calculated and pulled apart. Therefore, when everything settles down, the anchor turns out to be completely different from where the browser first threw us. I myself see such solutions: 1. Somehow suppress the transition to the anchor initially. And then, when the page is fully formed, scroll to the right place (with a script, of course) by reading the #name from the URL. There are no problems with the second part, but how to suppress the transition? 2. Replace the anchors with your non-standard ones. For example, instead of<a name=...>




<a name=...>Initially load HTML with the view tag . When the layout settles down, replace them with normal ones and, as in paragraph 1, scroll to them yourself. But it seems to me that this should be a standard situation that many have encountered. Is it solved somehow simply without my "bicycles"? <a my_anchor_name=...><a name=...>

Answer 1

I couldn't imagine what's going on in your project, but most likely you should look towards e.preventDefault();

Answer 2

Do not build the layout with a script))
Only crutch solutions. For example, replace the a tag with . Naturally, the scroll should be done with a script. Change url via history api . (this is the ugliest part) When loading the page, parse the url and scroll where necessary <div data-href="id_name"> ...

Answer 3

This is how I did it, it turned out pretty easy:
Such anchors are loaded in HTML

$(document).on('load', function()	{

  // Заменить якоря с условных на нормальные
  $('a[anchor]').each( function()	{
    var tag = $(this).attr('anchor');
    $(this).attr('name', tag).removeAttr('anchor');
  });

  // Проскроллить до якоря
  var tag = document.location.href.split('#')[1];
  var pos = $('a[name='+tag+']').offset().top;

})