Как отцентрировать якорь?

Question

Как сделать так, чтобы якорь отображался посередине экрана после перехода к нему?

$(document).ready(function() {
  $("#form-answ}").on("click", "a", function(event) {
    event.preventDefault();
    var id = $(this).attr('href'),
      top = $(id).offset().top;
    $('body,html').animate({
      scrollTop: top
    }, 1500);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form-answ" class="comment-input-block-replie">
  <!-- some items -->
</div>

Answer 1

$('.nav').on('click', 'a', function(){
  let wy = $(window).height() / 2,
      id = $(this).attr('href'),
      ey = $(id).offset().top,
      eh = $(id).outerHeight() / 2,
      top = ey - (wy - eh);
      
  top = top < 0 ? 0 : top;
  
  $('body,html').animate({
    scrollTop: top
  }, 1500);
  return false;
});

.achor {
  background: rgba(255,0,0,.25);
}

.block {
  height: 400px;
  background: gray;
}

.nav {
  position: fixed;
  bottom: 5px;
  left: 5px;
}

.nav a {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="nav">
  <a href="#a1">Якорь 1</a>
  <a href="#a2">Якорь 2</a>
  <a href="#a3">Якорь 3</a>
  <a href="#a4">Якорь 4</a>
</div>

<div id="a1" class="achor"><br>Якорь 1<br><br><br></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div id="a2" class="achor">Якорь 2<br></div>
<div class="block"></div>
<div id="a3" class="achor"><br><br>Якорь 3</div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div id="a4" class="achor"><br><br><br>Якорь 4<br><br><br></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

БЛОГ НА HUSL

Как отцентрировать якорь?

Ответы (1 шт):