title: jquery: How can I reset the document scrollbar when I append a layer over the document?
body: <p>How can I reset the document scrollbar when I append a layer over the document?</p>
  
  <p>For instance, it is like the facebook page when you have a very long document and you need to scroll down to see the older images/ posts,</p>
  
  <p><img src="https://i.stack.imgur.com/ulJ5J.jpg" alt="enter image description here"></p>
  
  <p>When you click on the photos, the scrollbar has changed - it is started from the top, but the document page does not jump at all,</p>
  
  <p><img src="https://i.stack.imgur.com/nBDKR.jpg" alt="enter image description here"></p>
  
  <p>When you close the photo viewer layer, the scrollbar returns to as it was before, but the page does not jump.</p>
  
  <p>This is my working code so far, but it does not work as I expect as the facebook's.</p>
  
  <pre><code>$('.get-photo').click(function(){
  
          var object = $(this);
          var object_path = object.attr('href');
          //alert(object_path);
  
          $(document.body).append("&lt;div class='background-photo'&gt;&lt;/div&gt;");
          $(document.body).append('&lt;div class="photos-holder"&gt;&lt;img src="'+object_path+'" /&gt;&lt;/div&gt;');
  
          var layer_background = $('.background-photo');
          var height_document = $(document).height();
          var scroll_top = $(window).scrollTop();
  
          layer_background.css({
              width:'100%',
              height:height_document + 'px',
              background: '#fff',
              opacity: 0.4,
              position:'absolute',
              top:0,
              left:0,
              zIndex:'100'
          });
  
          $('.photos-holder').css({
              width:'800px',
              height:'500px',
              background:'#ffffff',
              border:'1px solid #000',
              marginLeft:'-400px',
              position:'absolute',
              top: scroll_top + 100 + "px",
              left:'50%',
              zIndex:"101"
          });
  
          return false;
      });
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p>You can click this <a href="http://www.facebook.com/lauthiamkok.kitchen" rel="nofollow noreferrer">link</a>, scroll and click on one of the photos to see what I mean.</p>