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

-1

我的意圖是通過單擊鏈接按鈕移動到另一個分區，它應該使頁面滾動到達我想要的分區，但它是沒有發生。這段JavaScript代碼有什麼錯誤？滾動函數拋出錯誤「Uncaught TypeError：無法讀取屬性'offsetTop'爲null」

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>

來源

2015-08-03 Nithya Neela

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

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

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

來源

2015-08-03 10:19:11

錯誤說元素爲空。你傳遞了正確的ID嗎？ –

不，有一個屬性叫做offsetTop來返回當前元素的距離。在我的代碼中，考慮目標分區頂部是'150'，在此滾動基於距離發生，值爲'40'，當前Y爲'0'。要達到目標div頂部，此代碼將被執行，直到「currentY

是的，我已經通過了正確的ID。 –

我發現此代碼工作正常。我只是使用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);

來源

2015-10-20 10:25:49

不是最合適的答案，正確使用超時會更好一些：'var animator = setTimeout（function（）{autoScroll（element）}，speed）;'。 http://codepen.io/anon/pen/vNpxKv?editors=001 – Shikkediel

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

回答

相關問題