How to scroll to a block?

Question

JavaScript

Hello, I use this code to open the desired bootstrap tab by anchor, but unfortunately I can’t make it so that the anchor was scrolling to the desired tab, tell me, please, what is the problem?

var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');



  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });

Answer 1

Here
PS Do not produce monotonous topics.
upd 17:20. I figured it out. The fact is that native scrolling does not work if the anchor is hidden / not visible (which is logical). And for some reason, the anchor on name does not work when there is the same id on page 0.o And the bootstrap, damn it, uses this id for tabs.

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

But! If we change the code a bit and assign the correct id to links that are always visible...

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home-tab" id="home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile-tab" id="profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages-tab" id="messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings-tab" id="settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home-tab">...</div>
    <div role="tabpanel" class="tab-pane" id="profile-tab">...</div>
    <div role="tabpanel" class="tab-pane" id="messages-tab">...</div>
    <div role="tabpanel" class="tab-pane" id="settings-tab">...</div>
  </div>

</div>

Now if you give links like site.ru/tabs#message, then the scroll will work.
Here is link#messages - The #message tab will be shown and scrolling to it works without js.