title: Scroll to top of a lightbox div using jQuery
body: <p>I have a jQueryUI dialog box with content exceeding the default height (so it scrolls within the dialog box), and at the bottom there is a submit button. I am using ajaxstart to show a loading screen but due to the dialog scrolling, you do not see the loading div, except if I click on the button and scroll manually to the top. </p>
  
  <p>I want to be able to scroll to the top of the div within the dialog box on a click event. I have the following code which I tried (but no success):</p>
  
  <pre><code>#loading {
  z-index: 200;
  display:none;
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  background-color:#000000;
  
  /* Theoretically for IE 8 &amp; 9 (more valid) */
  /* ...but not required as filter works too */
  /* should come BEFORE filter */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  
  /* This works in IE 8 &amp; 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=70);
  
  /* Older than Firefox 0.9 */
  -moz-opacity:0.5;
  
  /* Safari 1.x (pre WebKit!) */
  -khtml-opacity: 0.5;
  
  /* Modern!
  /* Firefox 0.9+, Safari 2?, Chrome any?
  /* Opera 9+, IE 9+ */
  opacity: 0.5;
   }
  
   // jQuery Script:
   $("input[name='docSubmit']").click(function() {
              var height = $("#attendeeManual").height();
              $("#loading").css("height",height);
              $('html, body').animate({scrollTop:$('#attendeeManual').offset().top - 20}, 'slow');
          });
  </code></pre>