Question

我有一个目录与页面上的标题相匹配。

当我点击TOC中的任何标题时，所需的行为是滚动文档，使得相应TOC点击的标题现在位于浏览器窗口的左上角。

问题是，只有当文档在我要滚动到的标题下方有一整页内容（窗口高度）时才能使用。

解决此问题的最佳做法是什么？
我应该自动创建空内容以使文档变大吗？
我可以检测到这种情况并使文档/视口高度变大吗？
有更好的方法吗？

Answer 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上运行不正常，请复制代码并在本地或者测试。）由于您没有提供任何基于的代码，因此创建的代码片段尽可能短。请不要注意HTML以及点击逻辑的实现方式，而应仔细检查body的高度计算方式和时间。

自动填充浏览器文档高度以滚动到任何元素

1 个答案: