title: How can I maintain the scroll position after window resize?
body: <p>I am building a chrome extension that will let you save your scroll location on a webpage. The issue I'm running into is often when you resize the page the content you are looking for may have been pushed around and is no longer at the same scroll location. I've been trying to build something that would adjust the scroll location to fit the adjusted size. I found <a href="http://jsfiddle.net/JamesKyle/RmNap/" rel="nofollow noreferrer">this solution</a>, and it's closer to what I am looking for, but it's also still some what inaccurate. It uses the document's height and the scroll location to figure out where you are percentage wise. Then it tries to maintain that percent as you resize the page. Unfortunately that percent is not entirely accurate.</p>
  
  <p>I have integrated it into my extension, and I have been trying it out on this <a href="http://en.wikipedia.org/wiki/Antonio_Sant%27Elia" rel="nofollow noreferrer">wikipedia article</a>(I liked the drawings). I've added screenshots below to show how off it can be. I have tried to multiply the height delta by a constant, but there is no single number that works. I have tried to round the numbers to different points, but same problem. What can I do to make the scroll location more accurate?  </p>
  
  <p><strong>Manifest.json</strong></p>
  
  <pre><code>{
      "name": "ScrollMark",
      "description": "Save your place on a page",
      "version": "1.1",
      "manifest_version": 2,
      "content_scripts": [{
          "js": ["jquery.min.js", "contentScript.js"],
          "matches": ["http://*/*", "https://*/*"]
    }]
  }
  </code></pre>
  
  <p><strong>contentScript.js</strong></p>
  
  <pre><code>$(document).keypress(function (e) {
      if (e.which == 13) {
          console.group("User hit enter");
          console.log('window size', $(window).width(), $(window).height());
          console.log('document size', $(document).width(), $(document).outerHeight(true));           
          console.log('scroll top', $(document).scrollTop());
          console.groupEnd();
      }
  });
  (function () {
      var pageHeight = $(document).outerHeight(true), //get hight of element, including margin
          scrollPosition = $(document).scrollTop(),
          scrollPercent = scrollPosition / pageHeight,
          resizing = false,
          resizeTimer;
      $(window).scroll(function () {
          if (!resizing) {
              scrollPosition = $(document).scrollTop();
              scrollPercent = scrollPosition / pageHeight;
          }
      });
      $(window).resize(function () {
          resizing = true;
          clearTimeout(resizeTimer);
          resizeTimer = setTimeout(function () {
              resizing = false
          }, 500);
          pageHeight = $(document).outerHeight(true);
          $(document).scrollTop(scrollPercent * pageHeight);
      });
  })();
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/YvwsY.png" alt="100% View">
  100% View
  Expected scroll location: 962
  Actual scroll Location: 962
  <img src="https://i.stack.imgur.com/8u1bQ.png" alt="75% View">
  75% View
  Expected scroll location: 1207
  Actual scroll Location: 1211
  <img src="https://i.stack.imgur.com/J4B1H.png" alt="50% View">
  50% View
  Expected scroll location: 1534
  Actual scroll Location: 1577
  <img src="https://i.stack.imgur.com/EPoC2.png" alt="25% View">
  25% View
  Expected scroll location: 2852
  Actual scroll Location: 2708</p>