title: jQuery if element is on current tab
body: <p>I am using <a href="https://jqueryui.com/tabs/" rel="nofollow">tabs</a> to break up a long form that has many entry fields.</p>
  
  <p>My form has 4 tabs and a preview of the users selection below the tabs form.</p>
  
  <p>In the preview below the tabs, I have placed icons that allow the user to scroll back up to the input element on the tab that has the input element.</p>
  
  <p>This works great when the user is viewing the correct tab that they want to scroll up to. For example, if the input element is on tab 1 and the user is viewing tab 1, the user can scroll back up to that element on tab 1.</p>
  
  <p>However, if the input element is on tab 1 and the user is viewing tab 2, the scroll up does not work. I am assuming that this is because the element is not visible on the tab/form (but the element does indeed exist).</p>
  
  <p>So I made a conditional if/else statement to test if the element is reachable, but the condition always returns true. I cannot work out what the condition should be to check if the element is reachable on the tab or not.</p>
  
  <p>I have tried different conditions, but all return true.</p>
  
  <p>I am hoping that someone has a workable suggestion.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>function scrollUpSingleDocumentDetails(id){
      //if(!($("#"+id).length)){
      if($("#"+id).css('visibility') === 'hidden'){
          $('html,body').animate({scrollTop: $("#"+id).offset().top-50},'slow');
      } else {
          $('html,body').animate({scrollTop: $("#id_details_headline").offset().top-50},'slow');
      }
  }
  </code></pre>