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上效果不佳，请复制代码并在本地进行测试或某事。）由于您没有提供任何代码作为基础，因此此代码段创建得尽可能短。请不要关注HTML和点击逻辑是如何实现的，而是仔细检查，如何以及何时body计算高度。

于 2013-02-27T10:16:12.787 回答