滾動函數拋出錯誤「Uncaught TypeError：無法讀取屬性'offsetTop'爲null」

Question

我的意圖是通過單擊鏈接按鈕移動到另一個分區，它應該使頁面滾動到達我想要的分區，但它是沒有發生。這段JavaScript代碼有什麼錯誤？

var scrollY = 0; 
var distance = 40; 
var speed = 24; 
function autoScroll(element) { 
    var targetY = document.getElementById(element).offsetTop; 
    alert(element); 
    var currentY = window.pageYOffset; 
    var bodyHeight = document.body.offsetHeight; 
    var yPos = currentY + window.innerHeight; 
    var animator = setTimeout('autoScroll(\' '+element+' \')', speed); 
    if(yPos > bodyHeight) { 
     clearTimeout(animator); 
    } else { 
     if(currentY < targetY - distance) { 
      scrollY = currentY + distance; 
      window.scroll(0, scrollY); 
     } else { 
      clearTimeout(animator); 
     } 
    } 

} 

<h3 id = "main"> Main Heading </h3> 
<a href = "#" onclick = "return false;" onmousedown = "autoScroll('div1');"> Box 1 </a> <br/> 
<a href = "#" onclick = "return false;" onmousedown = "autoScroll('div2');"> Box 2 </a> <br/> 
<a href = "#" onclick = "return false;" onmousedown = "autoScroll('div3');"> Box 3 </a> <br/> 
<a href = "#" onclick = "return false;" onmousedown = "autoScroll('div4');"> Box 4 </a> <br/> 
<div id = "div1" class = "content"> First Box </div> 
<a href = "#" onclick = "return false;" onmousedown = "release('main');"> Go Back to Main </a> 
<div id = "div2" class = "content"> Second Box </div> 
<a href = "#" onclick = "return false;" onmousedown = "release('main');"> Go Back to Main </a> 
<div id = "div3" class = "content"> Third Box </div> 
<a href = "#" onclick = "return false;" onmousedown = "release('main');"> Go Back to Main </a> 
<div id = "div4" class = "content"> Fourth Box </div> 
<a href = "#" onclick = "return false;" onmousedown = "release('main');"> Go Back to Main </a> 

Answer 1

offset()的是一個函數和top是一個屬性。

var targetY = document.getElementById(element).offset().top; 

這是對您主題中的問題的迴應。問題不在於使用stackoverflow的良好實踐。

Answer 2

我發現此代碼工作正常。我只是使用trim（）方法從元素中刪除空間。

function autoScroll(element) { 
    var targetY = document.getElementById(element.trim()).offsetTop; 
    var currentY = window.pageYOffset; 
    var bodyHeight = document.body.offsetHeight; 
    var yPos = currentY + window.innerHeight; 
    var animator = setTimeout('autoScroll(\' '+element+' \')', speed);