Как узнать, отображается ли элемент на экране. Если нет, прокрутите страницу

Question

Я пытаюсь создать всплывающее окно, подобное одному here. В этом случае, когда я нажимаю кнопку CUSTOMISE, под кнопкой появляется окно. Если элемент не отображается полностью на экране, страница прокручивается вниз или вверх, пока он не будет полностью виден.

я смог достичь половину результата:

$('body').on('click',"#"+ID,function() { 

     var $this = $(this); 

     $('#attr-div-'+baseId).css({ 
      top: $this.position().top+55, 
     }).show(); 
    }); 

Как я могу прокрутить страницу до тех пор, пока элемент полностью виден? Спасибо!

Answer 1

Я нашел решение:

$('body').on('click',"#"+ID,function() { 

     var $this = $(this); 

     $('#attr-div-'+baseId).css({ 
      top: $this.position().top+55, 
     }).show(); 

     $('html, body').animate({ 
      scrollTop: $('#attr-div-'+baseId).offset().top-55 
     }, 1000); 
    }); 

Это не совсем то, что я хочу, но это позволяет мне сделать всплывающее окно всегда видимым.

Answer 2

Что-то, как это должно работать, но скрипка с большей идеей была бы полезна:

$('body').on('click', "#"+ID, function() { 

    var popup = $('#attr-div-'+baseId); 
    var offset = $(this).offset().top+55; 

    popup.css('top', offset).show(); 
    $(window).scrollTop(offset+popup.height()-$(this).height()); 
}); 

Предполагая, что это не имеет фиксированную позицию - если она ниже окна, а затем, вы должны изменить его ,

Это может быть уточнено (и анимированные, а также, конечно, а не мгновенная):

http://codepen.io/anon/pen/dPBNWY?editors=001