Look at this code
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
td:hover {
background-color: lightgreen;
color: #000000;
}
</style>
<script>
var video=document.getElementById("myVideo");
function pauseVideo(){
video.pause();
}
function unpauseVideo(){
video.play();
}
</script>
</head>
<body>
<video id="myVideo" width="200" height="200" controls autoplay loop>
Your browser does not support the video tag.
</video>
<br>
<br>
<br>
<br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<table>
<tr>
<td>
<a href="#" onclick="pauseVideo()" style="font-size: 35px; text-decoration: none" > Pause Video</a>
</td>
<td>
<a href="#" onclick="unpauseVideo()" style="font-size: 35px; text-decoration: none" > Unpause Video</a>
</td>
</tr>
</table>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<p>End Line</p>
</body>
</html>
When I click on the Pause Video / Unpause Video button, the page jumps to the top. That is not what I want. I would like the page to stay still now when I click these buttons.
I don’t understand why it keeps jumping up to the top whenever I click them.
How do I change that?