Question

I am using the following code to focus on the anchor when clicked

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

it does focus on that anchor but the issue is that part of anchor towards top of the screen. Is there a way I can kinda keep it in the middle?
Thanks

Answer 1

Here’s what I’ve done in the past:

Basically, you measure the height of the window, and the position of the div and scroll to a point which puts the div in the center of the screen.

$('#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));
});