Element.getBoundClientRect.top funktioniert nicht richtig

Question

Ich versuche, ein Such- und Navigationssystem zu erstellen. Der Code scheint zu funktionieren, es ist jedoch nicht in der Lage, zu allen Suchmustern zu navigieren. Dies liegt hauptsächlich daran, dass Element.getBoundClientRect(). Top den falschen Wert zurückgibt.

Ich weiß nicht, was mit der Implementierung falsch ist.

var clickCounter = -1; 
 

 
function nextFunction() { 
 
    clickCounter += 1; 
 
    var elements = document.querySelectorAll("#test1"); 
 
    var temp = elements[clickCounter].getBoundingClientRect().top; 
 
    alert(temp); 
 
    window.scrollTo(0, temp); 
 
} 
 

 
function previousFunction() { 
 
    clickCounter -= 1; 
 
    var elements = document.querySelectorAll("#test1"); 
 
    var temp = elements[clickCounter].getBoundingClientRect().top; 
 
    alert(temp); 
 
    window.scrollTo(0, temp); 
 
}

<table border="0"> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line1</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line1</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line1</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line1</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line1</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line1</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line1</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line1</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line1</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td><mark id="test1">This is line2</mark></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line3</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line4</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line4</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line4</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line4</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line4</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line4</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line4</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td><mark id="test1">This is line4</mark></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line4</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line4</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line4</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line4</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line4</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line4</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line4</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td><mark id="test1">This is line5</mark></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line6</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line6</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line6</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line6</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line6</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line6</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td>This is line6</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="Previous" onclick="previousFunction()"></td> 
 
    <td><input type="button" value="Next" onclick="nextFunction()"></td> 
 
    <td><mark id="test1">This is line6</mark></td> 
 
    </tr> 
 
</table>

Answer 1

erkannte ich das Problem. Es war etwas mit Scrollen und der aktuellen Position im Fenster zu tun. Ich habe window.scrollY zum Wert von y-Koordinate hinzugefügt und es hat funktioniert.

var clickCounter = -1; 

function nextFunction() { 
    clickCounter += 1; 
    var elements = document.querySelectorAll("#test1"); 
    var temp = elements[clickCounter].getBoundingClientRect().top; 
    temp = temp + windown.scrollY; 
    alert(temp); 
    window.scrollTo(0, temp); 
} 

function previousFunction() { 
    clickCounter -= 1; 
    var elements = document.querySelectorAll("#test1"); 
    var temp = elements[clickCounter].getBoundingClientRect().top; 
    temp = temp + windown.scrollY; 
    alert(temp); 
    window.scrollTo(0, temp); 
}