ウィンドウサイズの変更により閲覧している所が下へ移動してしまう

Question

前提・実現したいこと

http://azu.github.io/promises-book/#not-throw-use-rejectを読んでいる時、別ウィンドウをひらいて作業したかったためウィンドウサイズを半分にした時に起きたことです

発生している問題・エラーメッセージ

ウィンドウサイズを小さくしたりすると、自分が読んでいた文章が下のほうに押されていってしまいます
ちょっとしたウェブサイトならいいんですが、上のサイトはかなり分量があり、一度読んでいたところを見失うと再度探すまでが大変で、ウィンドウサイズを変えるだけでもそれなりの手間がかかります

そこで、ウィンドウサイズが変えられても、どうにかして、自分が読んでいた部分のコンテンツをウィンドウの中に収められないかと思いまして質問しました

試したこと

ウェブページにはJavaScriptでの処理を動かせるためこれを利用して、CSSを加えたり、JavaScriptでの処理をしたりして対応できないか、という方向で考えました

• JavaScriptでウィンドウサイズを変える前に画面の真ん中にあるテキストを取得してどうにかできないかと考えました

⇒画面の真ん中にあるテキストが他の部分でも出現した時にそっちに反応してしまう。あと常に画面真ん中のテキストを取得し続けるのは負荷がかかるかもしれない。

• JavaScriptでウィンドウサイズを変える前にその部分のページ最上部からの高さなどを取得して閲覧場所を特定できないかと考えました

⇒そもそもウィンドウサイズを変えたら高さも変わってしまうから意味がなかった

このように、思いついた案は汎用的（？）ではありませんでした

補足情報（FW/ツールのバージョンなど）

可能な限りJavaScriptには頼らず、CSSで実現出来ないか、と考えています

よろしくお願いします

Answer 1

CSSでの実現は難しそうな気がしたので、jQueryを用いて以下のモノを考えてみました
内容としては質問者様のページ位置を取得してというものと似たような感じです。
試しては無いので動くかどうかは不明ですが…

var scrollpercent = 0;
$(document).ready(function(){

    $(window).scroll(function(){
        var pageHeight = $('body').height(); //ページ全体の高さ取得
        var scrollpos = $(window).scrollTop(); //スクロールの位置取得
        scrollpercent = scrollpos / pageHeight; // %を現在位置を高さの％として取得
    });

    $(window).resize(function() {
        var resizeHeight = $('body').height(); //リサイズ後のページ全体の高さ取得
        var afterPos resizeHeight * scrollpercent 
        // あとはafterPos を使ってページ内位置を調整する（記述省略）
    });
});