Как при переходе по якорю на форму, разместить форму посреди экрана?

Question

[barsecky]

Всем привет. Возник вопрос.
На сайте есть форма , к ней можно перейти по якорям.
Для плавного перехода используется скрипт.
Но при переходе форма размещается в верху экрана.
Как сделать так что бы при переходе фрма была по середине экрана?

$("#form").on("click","a", function (event) {
  
      event.preventDefault();
 
      var id  = $(this).attr('href'),

          top = $(id).offset().top;

      $('body,html').animate({scrollTop: top}, 1500);
  });

Answer 1

[ettaluni]

Ну тут нужно высоту формы знать и высоту клинского разрешения. То есть top = top + ($(window).height() - $(id).height()) / 2

Comments

[barsecky]

Если бы я еще понимал что тут написано(( только начал изучать js
Высота формы у меня 390рх , куда мне это записать?

[ettaluni]

barsecky, Я тебе готовый код дал. Строчку вставь после top

[barsecky]

ettaluni, спасибо за помощь.
вставил вот так:

$("#form").on("click","a", function (event) {
  
      event.preventDefault();
 
      var id  = $(this).attr('href'),

          top = $(id).offset().top;

          top = top + ($(window).height() - $(id).height());

      $('body,html').animate({scrollTop: top}, 1500);
  });

но форма все равно в верху экрана(((
что я делаю не так?

[ettaluni]

barsecky, alert($(window).height() - $(id).height());

[barsecky]

ettaluni, спасибо оказывается что скрипт и не работал)) нашел другое решение вопроса.
Правда нужно тут как-то сделать что бы форма была по центру, а то на мобильном она ниже(((
Может кому пригодится

var $page = $('html, body');
  $('a[href*="#form"]').click(function() {
      $page.animate({
          scrollTop: $($.attr(this, 'href')).offset().top-200
      }, 800);
      return false;
  });

[ettaluni]

barsecky, Ниже потому что нужно вычислять height

[barsecky]

ettaluni, может подскажешь как это делать?)))

[ettaluni]

barsecky, Я тебе уже написал, весь мой ответ и есть как высчитать высоту клиентского окна, формы и разность между ними