Якорь JQuery должен прийти в середине

Question

Я использую следующий код для фокусировки на якоре при нажатии

$('#mydiv').click(function() {
  location.href="#blah";
});

он фокусируется на этом якоре, но проблема в том, что часть якоря движется к верхней части экрана. Есть ли способ, которым я могу держать это в середине? Спасибо

Answer 1

Вот что я делал в прошлом:

По сути, вы измеряете высоту окна, положение div и прокручиваете до точки, которая помещает div в центр экрана.

$('#mydiv').click(function(e) {

  e.preventDefault();

  location.href="#blah";

  var windowHeight = $(window).height();
  var elementHeight = $("#blah").height();

  var elementPosition = $("#blah").position();
  var elementTop = elementPosition.top;

  var toScroll = (windowHeight / 2) - (elementHeight / 2);

  window.scroll(0,(elementTop - toScroll));
});

Answer 2

Я думаю, вы просто должны получить позицию якоря, размер окна. Затем вы можете перейти к нужной позиции.

        $('#mydiv').click(function (e) {
            e.preventDefault(); // to prevent default anchor behaviour
            var target_offset_top = $("#blah").offset().top;
            var window_height = document.body.clientHeight;
            $('html,body').animate({scrollTop: target_offset_top - window_height/2});
        });