はじめに
ブラウザがいくつかのステップで大きなテキストを読む必要がある場合があります。 小説でも、記事でも、技術ガイドでもかまいません。 ドキュメントが章に分割され、便利なナビゲーションが装備されていると便利です。 次に、読み取りを中断して、セクションページまたはドキュメントのアンカーポイントに一時的なブックマークを作成できます。 そして、テキストが連続している場合は？ または、内部セクションへのリンクが提供されていませんか？ または、セクション自体が大きすぎて、後でセクション内で適切な段落を見つけるのが難しいですか？
解決方法の1つは、ドキュメントをディスクに保存し、内部ブックマークを作成したり、テキストが閉じられた場所を記憶したりできるプログラムを使用して読み取ることです。
しかし、このようなエンティティの乗算は、誰にとっても便利ではありません。 もっと簡単な方法を見つけてみましょう。
この方法を普遍的にするには、ドキュメントの構造（
body
と多分
pre
以外のタグが含まれていない場合があります）ではなく、テキストコンテンツ（テキスト内に繰り返し行があるか、ドキュメントが署名されていない写真のコレクションである可能性があります）に焦点を合わせる必要があります。 最も不安定な指標であるメトリックに焦点を当てたままです。 つまり、ドキュメントの先頭からスクロールされた距離（水平スクロールのページはまれであり、これまでのところ無視できます）。
アルゴリズムが登場しました。ドキュメントの先頭から読み取り場所までの距離を取得して、どこかに保存する必要があるため、後でページを目的のセクションにスクロールするように要求する必要があります。 これを行うには、スクロール距離を決定するためのクロスブラウザーメソッド、ブックマークデータベース用のクロスブラウザーストレージ、およびドキュメント内の位置を保存および復元するためのクロスブラウザーインターフェイスが必要です（アルゴリズムはサーバーソリューションに使用できますが、クライアント側に興味があります）。
アルゴリズムには、少なくとも2つの欠点があります：ブラウザーウィンドウのサイズにスナップする（ユーザーがこのサイズを頻繁に変更することはほとんどありませんが、さらに、この依存関係を最小化する方法があります）および静的ドキュメントのみをサポートします（たとえば、学ぶか、ニュースフィードが機能しません）。
1.スクロール定義
Internet Explorerは
window.scrollY
および
window.pageYOffset
サポートしていないため、
element.scrollTop
を使用します。 どの要素を使用するかは、ブラウザの動作モード、つまりページの
doctype
依存します。 標準モードでは
document.documentElement.scrollTop
使用し、互換モードでは
document.body.scrollTop
使用し
document.body.scrollTop
。 幸いなことに、モードをチェックする必要はありません。誤って選択された要素の
scrollTop
プロパティは
scrollTop
スクロールに対して常にゼロになるため、両方の要素を単純に繰り返し、ゼロ以外の値を保存できます。
2.ブックマークの保存
便利だと思われるクロスブラウザストレージ方法は、 Web Storageのみです。 人気のあるブラウザーのすべての最新バージョン（Chrome 4 +、Firefox 3.5 +、Internet Explorer 8 +、Opera 10.5 +、Safari 4+）でサポートされています。 しぶしぶ、古いバージョンのサポートに別れを告げます。 唯一の欠点は、すべてのブラウザがローカルファイルに対してこのテクノロジをサポートしているわけではないことです。
localStorage
オブジェクトの機能は、ページドメインに焦点を合わせてデータベース内のデータを作成および要求し、すべてのローカルファイル（つまり、
file:///
プロトコルを使用して読み込まれたページ）にはドメインがないため、すべてのブラウザーが管理できない問題があります。 Chrome、Opera、およびSafariは、オフラインドキュメント用の
localStorage
テクノロジーをサポート
localStorage
、すべてのローカルファイルに共通のキーストアを作成します。 Internet Explorer
localStorage
ドメインのないドキュメントの
localStorage
オブジェクトを見つけられない
localStorage
エラーを
localStorage
します。 通常、Firefoxは無党派であり、関数が呼び出される場所では何もしません（バグはこことここに記録され ます ）。 したがって、最後の2つのブラウザーについては、オンラインまたはブラウザーのキャッシュから読み取ることが唯一の方法です。
興味のあるページごとに、データベースに一意のキーを作成します。このキーは、任意のプレフィックスとドキュメントの完全なURLで構成されます。 そのため、ブックマークはオブジェクトと自動的に関連付けられ、2つの小型の汎用機能によって保存および要求できます。
3.インターフェース
これまでのところ、すべてのブラウザ用の拡張機能を作成する一般的な方法はないようです。 したがって、古い実証済みのパス-bookmarkletsがまだあります 。
コンポーネントを接続する
3つの関数のコードを作成してみましょう。1つ目はスクロール距離を受け取ってデータベースに保存し、2つ目はページのスクロールを復元し、3つ目はデータベースからブックマークを削除します（オプションの増加です）。
スクロール保存コード（ブックマーク）：
localStorage ['bm_' + document.location.href] =
document.documentElement.scrollTop || document.body.scrollTop; スクロール回復コード（ブックマークの移行）：
window.scrollTo（0、localStorage ['bm_' + document.location.href] || 0）;
ブックマーク削除コード：
localStorage.removeItem（ 'bm_' + document.location.href）;
スペースを削除すると（ペアを離れる必要があります。そうしないと、長い行がトピックの境界を越えて消えます）、ルールに従って、値を返さない匿名関数でコードをラップすると、次のブックマークレットが取得されます。
スクロール保存コード（ブックマーク）：
javascript：（関数（）{localStorage ['bm _' + document.location.href] = document.documentElement.scrollTop || document.body.scrollTop}）（） スクロール回復コード（ブックマークの移行）：
javascript：（関数（）{window.scrollTo（0、localStorage ['bm _' + document.location.href] || 0）}）（） ブックマーク削除コード：
javascript：（関数（）{localStorage.removeItem（ 'bm _' + document.location.href）}）（） 残念ながら、Habrahabrフィルターはブックマークレットコードを含むリンクの挿入を許可していません。セキュリティ上の理由から、
javascript
プロトコルの名前が
javascript
ます。 したがって、最初から3つのブックマークを作成し、アドレスの代わりに機能コードを入力することは残ります。
これが誰かにとって不快に思える場合は、ここからリンクをドラッグできます（Internet Explorerでは、ブックマークのドラッグアンドドロップが常に機能するとは限らないため、リンクのコンテキストメニューから目的のお気に入りフォルダーに追加することをお勧めします）。
もちろん、これらの機能の基礎は、各ブラウザを使用してすでに開発できます。 FirefoxのGreaseMonkeyまたはカスタムボタンを使用する（または完全な拡張機能を作成する）ことができ、OperaのウィジェットまたはChromeの拡張機能としてアルゴリズムを設計できます。 目的のページを閉じる前に自動ブックマークを設定し、開いたときに自動的に最後の位置に移動できます。 ブラウザウィンドウの現在のメトリックをデータベース内のキーの名前に追加して、ブックマークをさまざまなサイズに設定できます。 サーバーソリューションを実装できます（残念ながら、サーバー側にデータベースは必要ありません。価格は数行のコードになります）。
このすばらしいWeb Storageテクノロジーの機能のもう1つの図を考えてみましょう。