The task is next

The site is built on WordPress 5.2.2

There are 3 parent blocks each with a different id that are added to the menu, there are additional category elements in the blocks themselves, when clicking on a category element, the visitor goes to the site category.

When the user clicks the back button in the browser , it should return to the original position for the selection of category elements, but so that the block itself is in the middle of the screen.

When navigating from the menu (the link is anchored to the parent block ‘# blok1’), the parent block is exactly centered on the page.

I tried to solve this problem through localStorage where I write down the id of the block from which the user is navigating

$ (". wrapper_body .categ_block"). on ("click", function () {
  var locItem = $ (this) .attr ('id');
   var linkST = window.location.href;
   localStorage.setItem ('linkSite', linkST);
   localStorage.setItem ('backUpHist', locItem);
});

and on the page of the category itself, when returning back, I try to replace the link with my own

var locItems = localStorage.getItem ('backUpHist');
var siteLink = localStorage.getItem ('linkSite');
var linksBl = siteLink + "#" + locItems;
 console.log (linksBl);
 window.onbeforeunload = function () {
  window.location.href = linksBl;
};

But when the user scrolls the parent block up or down, the user returns to the position from which he went to the categories, as in the second picture.

I would appreciate your help.

Answer 1, authority 100%

The problem is that Chrome itself remembers the position of the scroll, and when returning back, it prefers it over the element from the anchor.

This feature can be disabled, however, in my tests, then the browser would stop and go to the element from the url. But you can go to it yourself:

// disable auto-recovery of the scroll
 if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual'
 }
 // go to the element
 window.addEventListener ('load', function () {
  const hash = window.location.hash
  location.hash = ""
  location.hash = hash
 })

The second option without disabling this feature is to scroll to the element from the hash by yourself using js

window.addEventListener ('load', function () {
  if (window.location.hash) {
   setTimeout (function () {document.querySelector (window.location.hash) .scrollIntoView ()}, 0)
  }
 })

setTimeout (…, 0) adds a task to the end of the current queue so that scrolling occurs after the browser restores the scroll.
In this method, there will be a small lag when opening the page, because it jumps to the element after the entire page has loaded.

The third option is to deceive the restoration of the browser scroll by setting it to the position we need before closing the page

window.addEventListener ('beforeunload', function () {
  if (window.location.hash) {
document.querySelector (window.location.hash) .scrollIntoView ()
  }
 })

There will be a small lag before the transition (before closing the page), but it will open better.

Answer 2, authority 50%

Instead of window.location.href , use history.pushState () .

Answer 3, authority 25%

Here is a solution found by long hours of tests, thanks to everyone for their help in solving the problem.

(function ($) {
$ (document) .ready (function () {
var locItems = localStorage.getItem ('backUpHist');
var siteLink = localStorage.getItem ('linkSite');
var linksBl = siteLink + "/ #" + locItems;
window.history.pushState ({page: 1}, "", "");
window.onpopstate = function (event) {
 if (event) {
  window.location.href = linksBl;
 }
};
});
}) (jQuery);