自動填充瀏覽器文檔高度滾動到任何元素

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的高度如何以及何時計算。