0

ページの見出しに一致する目次があります。

望ましい動作は、TOC 内の任意の見出しをクリックすると、ドキュメントがスクロールして、それぞれの TOC クリックの見出しがブラウザー ウィンドウの左上に表示されるようにすることです。

問題は、スクロールしたい見出しの下にドキュメントの全ページのコンテンツ (ウィンドウの高さ) がある場合にのみ機能することです。

  • この問題を解決するためのベスト プラクティスは何ですか?
  • ドキュメントを大きくするには、空のコンテンツを自動作成する必要がありますか?
  • この状況を検出して、ドキュメント/ビューポートの高さを大きくすることはできますか?
  • より良いアプローチはありますか？
4

1 に答える 1

1

これは、最新のブラウザーのスニペットです。

JS:

window.onload = function () {
    var scrollTop = function (e) {
            if (e.target.tagName.toLowerCase() === 'li') {;
                document.getElementById(e.target.getAttribute('show')).scrollIntoView(true);
            }
            return;
        },
        reSize = function () {
            var s;
            document.body.style.height = '';
            s = document.body.offsetHeight + window.innerHeight - document.body.lastElementChild.offsetHeight;
            if (document.body.style.height < s){
                document.body.style.height = s + 'px';
            }
        };
    reSize();
    window.addEventListener('resize', reSize, false);
    document.getElementById('toc').addEventListener('click', scrollTop, false);
}

テスト用のCSS + HTML：

#toc {
    cursor: pointer;
}
.content {
    min-height: 100px;
    border: 1px solid #000;
    margin-top: 1em;
}

<ul id="toc">
    <li show="div_1">Header 1</li>
    <li show="div_2">Header 2</li>
    <li show="div_3">Header 3</li>
</ul>
<div id="div_1" class="content">DIV 1</div>
<div id="div_2" class="content">DIV 2</div>
<div id="div_3" class="content">DIV 3</div>

jsFiddleでのデモ(jsFiddle ではうまく動作しません。コードをコピーして、ローカルまたは sth でテストしてください。) ベースとなるコードを提供していないため、このスニペットはできるだけ短く作成されています。HTML やクリック ロジックの実装方法に注意を払うのではなく、 の高さがいつどのようにbody計算されるかを注意深く確認してください。

于 2013-02-27T10:16:12.787 に答える